ES6

ES6(ECMAScript 6)笔记3-字符串的扩展

includes(), startsWith(), endsWith()

  • includes()：返回布尔值，表示是否找到了参数字符串。
  • startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
  • endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
1
2
3
4
5
var s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

以上都支持第二个参数，表示开始搜索的位置。

1
2
3
4
5
var s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

repeat()

返回一个新的字符串，表示重复N次。

1
2
"x".repeat(3) // "xxx"
"hello".repeat(2) // "hellohello"

模板字符串

传统的输出模板是这样写的：

1
2
3
4
5
6
$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

在ES6中可以这样写了

用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

1
2
3
4
5
$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

大括号内部可以放任意的表达式、函数，也可以进行运算和引用对象属性。

1
2
3
4
5
6
7
8
9
10
11
12
var x = 1;
var y = 2;

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

console.log(`${x} + ${y*2} = ${x+y*2}`)
// "1 + 4 = 5"

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

标签模板

模板字符串的功能不只是上面这些，它还可以紧跟着一个函数名后面，该函数将被调用来处理这个字符串。

1
2
3
4
5
6
7
8
9
10
let a = 5,
  b = 10;

tag `Hello ${a + b} world ${a * b}`;

function tag(stringArr, val1, val2) {
  console.log(stringArr); // [ 'Hello ', ' world ', '' ]
  console.log(val1);  // 15
  console.log(val2); // 50
}

tag的第一个参数是一个数组，里面放的是模板字符串中没有被变量替换的部分。
其他的参数都是模板字符串被各个变量替换后的值，因为上面的例子中只有2个变量，所以会接收到 val1 和 val2。

String.fromCodePoint(), raw(), codePointAt(), at(), normalize()

略