ES6学习笔记之字符串扩展

Xu Quan（Nikkkki）

2018-07-15

学习笔记

ES6, JavaScript

Learning Card
ES6中，字符串有了以下变化：
- 新特性
  - 增加了遍历器接口，可以被for...of来遍历
- 模板字符串
  - 用反引号标识字符串
  - 字符串可以转行
  - 字符串可以嵌入变量
- 新方法
  - 判断字符串 includes(), startsWith(), endsWith()
  - 创建字符串 repeat()
  - 修改字符串 padStart(), padEnd()

1. 新特性

字符串新添加了遍历器接口，可以被解析成一个类似于数组的数据结构。

1 2	let str ="hello"; console.log(str[Symbol.iterator]); //[Function: [Symbol.iterator]]

因此，字符串也可以被for...or来遍历。

let str =" hello";
for(let value of str) {
  console.log(value);
}
//h
//e
//l
//l
//o

2. 模板字符串

模板字符串用反引号来标识，可以当做普通字符串使用。
1
`hello world`
模板字符串包含的字符串可以转行，且在解析的过程中，转行符不会丢失。
1
2
3
4
5
let str = `hello
world`;
console.log(str);
//hello
//world
因此，模板字符串非常适合在需要定义多行字符串，如输出HTML代码的时候使用
1
2
3
4
5
6
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`)
如果我们需要去掉字符串首尾的空格，可以使用trim()，但是需要注意的是一定是首尾，字符串中间的空格没办法通过trim()消除。
1
2
3
4
let str1 = ` hello`;
console.log(str1.trim()); //hello
let str2 = `he llo`;
console.log(str.trim()); //he llo

模板字符串中可以嵌入变量${}

1 2	let x = 1, y = 2; console.log(`${x} + ${y}`); // 1 + 2 = 3

还可以引用对象属性

1 2	let obj = {x: 1, y: 2}; console.log(`${obj.x + obj.y}`); //3

也可以调用函数

function fn() {
  return "hello world";
}
console.log(`foo ${fn()} bar`);  //foo hello world bar

3. 新方法

判断字符串方法

includes() 判断字符串内是否包含某个字符串元素

1
2
3

let str = "hello world";
console.log(str.includes("he"));  //true
console.log(str.includes("ro"));  //false

参数不可以是正则表达式

1 2	let str = "hello world"; console.log(str.includes(/^h/)); //TypeError:First argument to String.prototype.includes must not be a regular expression

startsWith(), endsWith() 判断字符串是否以某个字符串元素开头或者结尾

let str = "hello world";
console.log(str.startsWith("hello"));   //true
console.log(str.endsWith("world"));     //true
console.log(str.startsWith("great"));   //false

创建新的字符串 repeat()
- repeat()方法会返回一个新的字符串，将原字符串重复n次
  1
  'x'.repeat(3) //'xxx'
  字符串可以是模板字符串
  1
  2
  3
  4
  5
  6
  7
  let str = `hello
  world`;
  str.repeat(3);
  //hello
  //worldhello
  //worldhello
  //world
  参数可以是小数，但会被向下取整(Math.floor())
  1
  'na'.repeat(2.9) //'nana'
  如果参数是负数或者Infinity，会报错
  
  如果参数是0到-1间的小数，会等同于0
  1
  'na'.repeat(-0.9); //""
  参数如果是字符串，会先转换为数字
  1
  'x'.repeat('4') //'xxxx'
修改字符串方法
- padStart(), padEnd()在字符串头部/尾部补齐参数字符串
- 第一个参数是补齐后字符串的长度，第二个参数是用什么字符串来补齐
  1
  2
  'x'.padStart(5, 'ab'); //ababx
  'x'.padEnd(4, 'a'); //xaaa
- 如果字符串长度等于或者大于第一个参数，那么返回原字符串
  1
  'abc'.padStart(2, 'ab') //abc
- 如果原字符串的长度加上第二个参数指定的字符串的长度超过了第一个参数指定的长度，则截去超出位数的补全字符串
  1
  'x'.padStart(3, 'abcd') //abx
- 省略第二个参数，则默认使用空格补齐
  1
  'x'.padEnd(3) //" x"
- 可以用于在已知字符串格式的情况下补全字符串
  1
  '09-12'.pardStart(10, 'YYYY-MM-DD') //YYYY-09-12

ES6学习笔记的内容主要基于阮一峰老师的《ECMAScript 6入门》，原文请见链接

Learning Card

1. 新特性

2. 模板字符串

3. 新方法