JS字符串

字符串的扩展

字符的 Unicode 表示法

ES6 加强了对 Unicode 的支持，允许采用 \uxxxx 形式表示一个字符，其中 xxxx 表示字符的 Unicode 码点。

"\u0061"
// "a"

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

"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

如果直接在\u 后面跟上超过 0xFFFF 的数值（比如\u20BB7），JavaScript 会理解成\u20BB+7。由于\u20BB 是一个不可打印字符，所以只会显示一个空格，后面跟着一个 7。

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

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

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80' // 大括号表示法与四字节的 UTF-16 编码是等价的
// true 

有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符：

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

字符串的遍历器接口

ES6 为字符串添加了遍历器接口，使得字符串可以被 for…of 循环遍历：

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

除了遍历字符串，这个遍历器最大的优点是可以识别大于 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);
}
// "𠮷"

字符串 text 只有一个字符，但是 for 循环会认为它包含两个字符（都不可打印），而 for…of 循环会正确识别出这一个字符

直接输入字符： U+2028 和 U+2029

JavaScript 字符串允许直接输入字符，以及输入字符的转义形式。
举例来说，” 中 “ 的 Unicode 码点是 U+4e2d，你可以直接在字符串里面输入这个汉字，也可以输入它的转义形式 \u4e2d，两者是等价的：

'中' === '\u4e2d' // true

但是，JavaScript 规定有 5 个字符，不能在字符串里面直接使用，只能使用转义形式：

• U+005C：反斜杠（reverse solidus)
• U+000D：回车（carriage return）
• U+2028：行分隔符（line separator）
• U+2029：段分隔符（paragraph separator）
• U+000A：换行符（line feed）

字符串里面不能直接包含反斜杠，一定要转义写成**\\**或者**\u005c**。
这个规定本身没有问题，麻烦在于 JSON 格式允许字符串里面直接使用 U+2028（行分隔符）和 U+2029（段分隔符）。这样一来，服务器输出的 JSON 被 JSON.parse 解析，就有可能直接报错：

const json = '"\u2028"';
JSON.parse(json); // 可能报错

JSON 格式已经冻结（RFC 7159），没法修改了。为了消除这个报错，ES2019 允许 JavaScript 字符串直接输入 U+2028（行分隔符）和 U+2029（段分隔符）：

const PS = eval("'\u2029'");

注意，模板字符串现在就允许直接输入这两个字符。另外，正则表达式依然不允许直接输入这两个字符，这是没有问题的，因为 JSON 本来就不允许直接包含正则表达式。

JSON.stringify() 的改造

根据标准，JSON 数据必须是 UTF-8 编码。但是，现在的 JSON.stringify() 方法有可能返回不符合 UTF-8 标准的字符串。
具体来说，UTF-8 标准规定，0xD800 到 0xDFFF 之间的码点，不能单独使用，必须配对使用。比如，\uD834\uDF06 是两个码点，但是必须放在一起配对使用，代表字符𝌆。这是为了表示码点大于 0xFFFF 的字符的一种变通方法。单独使用 \uD834和\uDF06 这两个码点是不合法的，或者颠倒顺序也不行，因为 \uDF06\uD834 并没有对应的字符。
JSON.stringify() 的问题在于，它可能返回 0xD800 到 0xDFFF 之间的单个码点。

JSON.stringify('\u{D834}') // "\u{D834}"

为了确保返回的是合法的 UTF-8 字符，ES2019 改变了 JSON.stringify() 的行为。如果遇到 0xD800 到 0xDFFF 之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理：

JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

模板字符串

模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）：

$('#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!
`);

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

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

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

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
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 表达式，可以进行运算，以及引用对象属性、模板字符串之中还能调用函数。：

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的 toString 方法。
如果模板字符串中的变量没有声明，将报错：

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

由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出：

`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>
`;

如果需要引用模板字符串本身，在需要时执行，可以写成函数：

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

模板编译

通过模板字符串，生成正式模板的实例：

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

JavaScript 代码，使用 <%= … %> 输出 JavaScript 表达式。
怎么编译这个模板字符串呢？
一种思路是将其转换为 JavaScript 表达式字符串：

echo('<ul>');
for(let i=0; i < data.supplies.length; i++) {
  echo('<li>');
  echo(data.supplies[i]);
  echo('</li>');
};
echo('</ul>');

这个转换使用正则表达式就行了：

let evalExpr = /<%=(.+?)%>/g;
let expr = /<%([\s\S]+?)%>/g;

template = template
  .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
  .replace(expr, '`); \n $1 \n  echo(`');

template = 'echo(`' + template + '`);';

然后，将 template 封装在一个函数里面返回，就可以了：

let script =
`(function parse(data){
  let output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

将上面的内容拼装成一个模板编译函数 compile：

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;
}

compile 函数的用法如下：

let parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

标签模板

模板字符串的限制

模板字符串会将 \u00FF 和 \u{42} 当作 Unicode 字符进行转义，所以\unicode 解析时报错；而 \x56 会被当作十六进制字符串转义，所以 \xerxes 会报错。也就是说，\u 和 \x 在 LaTEX 里面有特殊含义，但是 JavaScript 将它们转义了。
为了解决这个问题，ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义，就返回 undefined，而不是报错，并且从 raw 属性上面可以得到原始字符串。

function tag(strs) {
  strs[0] === undefined
  strs.raw[0] === "\\unicode and \\u{55}";
}
tag`\unicode and \u{55}`

JavaScript 引擎将第一个字符设置为 undefined，但是 raw 属性依然可以得到原始字符串，因此 tag 函数还是可以对原字符串进行处理。
注意，这种对字符串转义的放松，只在标签模板解析字符串时生效，不是标签模板的场合，依然会报错。

let bad = `bad escape sequence: \unicode`; // 报错

字符串的新增方法

String.fromCodePoint

ES5 提供 String.fromCharCode() 方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于 0xFFFF 的字符：

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

ES6 提供了 String.fromCodePoint() 方法，可以识别大于 0xFFFF 的字符，弥补了 String.fromCharCode() 方法的不足。在作用上，正好与下面的 codePointAt() 方法相反：

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

注意，fromCodePoint 方法定义在 String 对象上，而 codePointAt 方法定义在字符串的实例对象上。

String.raw()

ES6 还为原生的 String 对象，提供了一个 raw() 方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

如果原字符串的斜杠已经转义，那么 String.raw() 会进行再次转义。

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw`Hi\\n` === "Hi\\\\n" // true

String.raw() 方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。
String.raw() 本质上是一个正常的函数，只是专用于模板字符串的标签函数。如果写成正常函数的形式，它的第一个参数，应该是一个具有 raw 属性的对象，且 raw 属性的值应该是一个数组，对应模板字符串解析后的值。

实例方法

codePointAt()

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

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

codePointAt() 方法的参数，是字符在字符串中的位置（从 0 开始）。上面代码中，JavaScript 将 “ 𠮷 a” 视为三个字符，codePointAt 方法在第一个字符上，正确地识别了 “ 𠮷 “，返回了它的十进制码点 134071（即十六进制的 20BB7）。在第二个字符（即 “ 𠮷 “ 的后两个字节）和第三个字符 “a” 上，codePointAt() 方法的结果与 charCodeAt() 方法相同。
总之，codePointAt() 方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符，它的返回结果与 charCodeAt() 方法相同。
codePointAt() 方法返回的是码点的十进制值，如果想要十六进制的值，可以使用 toString() 方法转换一下。

let s = '𠮷a';

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

其他