ECMAScript6学习笔记-字符串扩展

1.字符的Unicode表示法
JavaScript允许采用\uxxxx表示一个字符，xxxx是这个字符的Unicode码。

"\u0061"//"a"

这种表示法只能表示\u0000~\uFFFF之间的字符， 超出这个范围的字符必须用双字节的形式表示。

"\uD842\uDFB7"
// "��"

"\u20BB7"
// " 7"

上面代码中，如果直接在\u后面加超过0xFFFF的数值（20BB7），JavaScript会理解成\u20BB+7，\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟一个7。
ES6中做出了改进，只要将码点放入大括号中，就能正确解读该字符。

"\u{20BB7}"
// "��"

2.codePointAt（）
JavaScript内部，字符以utf-16的格式存储，每个字符固定为2个字节，对于那些需要四个字节存储的字符（Unicode码点大于0xFFFF）,JavaScript会认为它们是2个字符。

var s = "��";

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

let s = '��a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

可以用for…of循环遍历一个字符串，并且可以正确识别32位的utf-16字符。

let s = '��a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

codePointAt（）方法可以用于判断一个字符是由2个字节还是4个字节组成。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("��") // true
is32Bit("a") // false

3.fromCodePoint（）
String.fromCharCode（）可以根据码点返回对应的字符，但是不能识别32位的utf-16字符，ES6提供String.fromCodePoint（）方法，可以正确识别32位的utf-16字符。

String.fromCharCode(0x20BB7)
// "ஷ"  String.fromCharCode不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符。
String.fromCodePoint(0x20BB7)
// "��"

4.at()
ES5对字符串对象提供charAt()方法，返回字符串指定位置的字符。这个方法不能识别码点大于0xFFFF的字符。ES6提供at()方法，可以正确识别 Unicode大于0xFFFF的字符。

'abc'.charAt(0) // "a"
'��'.charAt(0) // "\uD842"

'abc'.at(0) // "a"
'��'.at(0) // "��"

5.includes(),startsWith(),endsWith()

let s = 'Hello world!';

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

这三个方法都可以设置第二个参数

let s = 'Hello world!';

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

startsWidth，includes的第二个参数表示从第n个字符开始直到字符串结束。endsWidth的第二个参数表示从第0个字符开始直到n-1个字符。
6.repeat()
repeat()返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

//参数是小数会被取整
'na'.repeat(2.9) // "nana"

//参数是负数或者Infinity，会报错。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

//参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
'na'.repeat(-0.9) // ""

//参数NaN等同于 0。
'na'.repeat(NaN) // ""

//参数是字符串会先转化成数字
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana

7.padStart(),padEnd()
ES2017引入了字符串补全长度的方法。padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx

//如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'

//如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789')
// '0123456abc'

//如果省略第二个参数，默认使用空格补全长度。
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

8.模板字符串
模板字符串是增强版的字符串，用反引号（`）。可以当作普通字符串使用，也可以定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

//如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

//如果你不想要保留，可以使用trim方法消除它。
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`).trim();

模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还能调用函数。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错

如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`
// "Hello World"

模板字符串甚至还能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

9.标签模板
模板字符串紧跟在一个函数后面，该函数将被调用来处理这个模板字符串，这就是“标签模板的功能”。标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`123`
// 等同于
alert(123)

如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

函数tag依次会接收到多个参数。

function tag(stringArr, value1, value2){
  // ...
}

// 等同于

function tag(stringArr, ...values){
  // ...
}

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

参考：ECMAScript 6 入门