字符串的扩展

原书作者：阮一峰
原书地址：ECMASript 6入门

• 基本字符表示
• 字符串新方法
• 模板字符串

1. 基本字符表示

• 字符的unicode表示法
  • JS允许采用\uxxxx形式来表示一个字符，其中xxxx为字符的unicode码

  "\u0061"
  // "a"
  

  • 超过\u0000-\uFFFF的字符使用两个双字节形式表示

  "\uD842\uDFB7"
  // "𠮷"
  

  • 码点放入大括号，可以正确解读字符

  "\u20BB7"
  // " 7" (理解为\u20BB+7，而\u20BB不可打印)
  "\u{20BB7}"
  // "𠮷"
  "\u{41}\u{42}\u{43}"
  // "ABC"
  

  • 包括这种方法，JS有6中字符表示法

  '\z' === 'z'  // true
  '\172' === 'z' // true
  '\x7A' === 'z' // true
  '\u007A' === 'z' // true
  '\u{7A}' === 'z' // true
  

2. 字符串新方法

• codePointAt
  • 功能：可以返回一个字符的码点（能够处理4字节字符，而charCodeAt不行）

  var s = "𠮷";
  s.length // 2
  s.charAt(0) // ''
  s.charAt(1) // ''
  s.charCodeAt(0) // 55362
  s.charCodeAt(1) // 57271
  
  let s = '𠮷a';
  s.codePointAt(0) // 134071
  s.codePointAt(1) // 57271
  s.codePointAt(2) // 97
  

  • 上述例子证明，在参数不恰当时仍然得不到想要的结果，可以使用for来解决

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

  • 该方法可以测试一个字符是双字节还是四字节

  function is32Bit(c) {
    return c.codePointAt(0) > 0xFFFF;
  }
  
  is32Bit("𠮷") // true
  is32Bit("a") // false
  

• String.fromCodePoint
  • 功能：返回码点对应的字符（弥补fromCharCode不识别大于0xFFFF字符的不足）

  String.fromCharCode(0x20BB7)
  // "ஷ"
  String.fromCodePoint(0x20BB7)
  // "𠮷"
  

  • 接收多个参数时，返回对应的字符串

  String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
  // true
  

• at (提案)
  • 功能：返回指定位置字符（支持四字节字符）

  '𠮷'.charAt(0) // "\uD842"
  '𠮷'.at(0) // "𠮷"
  

• normalize
  • 功能：合成字符（O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C））

  '\u01D1'.normalize() === '\u004F\u030C'.normalize()
  

• includes(),startsWith(),endsWith()
  • includes() 返回布尔值，表示是否找到了参数字符串
  • startsWith() 返回布尔值，表示参数字符串是否在原字符串头部
  • endsWith() 返回布尔值，表示字符串是否在原字符串尾部

  let s = 'Hello world!';
  
  s.startsWith('Hello') // true
  s.endsWith('!') // true
  s.includes('o') // true
  
  s.startsWith('world', 6) // true
  s.endsWith('Hello', 5) // true
  s.includes('Hello', 6) // false
  // 支持第二个参数，endsWith与其他两个不同，
  // 它针对前n个字符，其他两个则从第n个开始到字符串结尾
  

• repeat()
  • repeat返回一个新字符串，表示将原字符串重复n次

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

• padStart(), padEnd() (ES2017)
  • padStart用于首部补全，padEnd用于尾部补全

  'x'.padStart(5, 'ab') // 'ababx'
  'x'.padStart(4, 'ab') // 'abax'
  
  'x'.padEnd(5, 'ab') // 'xabab'
  'x'.padEnd(4, 'ab') // 'xaba'
  
  'x'.padStart(4) // '   x'
  'x'.padEnd(4) // 'x   '
  

• String.raw
  • 功能：用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串

  String.raw`Hi\n${2+3}!`;
  // "Hi\\n5!"
  
  String.raw`Hi\u000A!`;
  // 'Hi\\u000A!'
  
  String.raw`Hi\\n`
  // "Hi\\n"
  // 原字符串的斜杠已经转义，则raw不做处理
  

3. 模板字符串

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

// 传统模板
$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

// ES6 写法
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串，这称为“标签模板”功能

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

let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
// 如果模板字符里面有变量，就不是简单的调用了
// 而是会将模板字符串先处理成多个参数，再调用函数