字符串遍历器

1.字符串可以通过for...of进行遍历字符.
2.遍历器可以识别大于0xFFFF的码点，传统的for无法识别这样的码点

let text = String.fromCodePoint(0x20BB7);
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "
for (let i of text) {
  console.log(i);
}
// "𠮷"

• 允许直接输入U+2028和U+2029

• UTF-8中对于0xD800到0xDFFF之间的码点，不能单独使用，必须配对使用,而之前的JSON.stringify()可能会返回0xD800到0xDfff之间的单个码点。

• 模板字符串之中还能调用函数，直接使用${}即可,模板字符串可以嵌套。

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:'last',last:'V'},
]
console.log(tmpl(data));

模板编译：

function compile(template){
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;
  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');
  template = 'echo(`' + template + '`);';
  let script =
  `(function parse(data){
    let output = "";
    function echo(html){
      output += html;
    }
    ${ template }
    return output;
  })`;
  return script;
}

标签模板相当于另一种形式的函数调用：

let a=5;
let b=10;
function tag(s,...value){
    console.log(s,value);
    return "ok"; 
}
tag`Hello,${a-b},vd,${a+b}`;

传入的变量参数放进了argument中：

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals) {
  let result = '';
  let i = 0;
  console.log(literals);
  while (i < literals.length) {
    result += literals[i];
    i++;
    console.log("参数是",arguments);
    if (i < arguments.length) {
      result += arguments[i];
    }
  }
  return result;
}
console.log(msg);

标签模板在各种地方有很大的应用：

//防止注入恶意内容时：
let message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);
    // 将特殊字符替换掉
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 但仍把它们加上.
    s += templateData[i];
  }
  return s;
}
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>
//

//国际化
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`

• 在raw属性中保存的是字符串转义后的结果,如：strings.raw[0] 为 "First line\nSecond line"打印输出 "First line\nSecond line"

• 模板字符串的限制，对于出现了不合法的转义时（可能由字符集问题导致的）,可以返回结果为[undefined,raw:原字符串].

字符串新增方法

• String.fromCodePoint()
  String.fromCodePoint()可以识别大于0xFFFF的字符，如果有多个参数会合并为一个字符返回。

String.raw()

• String.raw返回每个斜杆都被转义的字符串（再加一个斜杆），本质上也是一个模板函数。

codePointAt()

对于大于0xFFFF的字符来说，charAt和charCodeAt只能解析两个字节，而codePointAt则可以处理4个字节储存的字符。
对于正确识别字符的方式：

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

//可用来判断一个字符是两个字节还是四个字节
function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}
is32Bit("𠮷") // true
is32Bit("a") // false

normalize()

对于某些字符存在多种Unicode编码,因此可以标准化：'\u01D1'.normalize() === '\u004F\u030C'.normalize()

判断子串

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

原字符串重复N次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError
'na'.repeat(-0.9) // ""
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

字符串的补全

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'abc'.padStart(10, '0123456789')//'0123456abc'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

消除空格

trimStart()只消除头部的空格，保留尾部的空格。trimEnd()也是类似行为。

matchAll用于正则