ES6学习笔记3：字符串的扩展

目录

字符的 Unicode 表示法

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

console.log('\u0061'); // a

这种表示方法仅限于\u0000~\uFFFF之间的字符，超出这个范围需要使用两个双字节的形式表示。

console.log('\uD842\uDFB7'); // 𠮷

超过0xFFFF的数值就会成为不可打印的字符，此时JavaScript会显示为一个空格。

在ES6中，将码点放入大括号中，就可以正确的解读这个字符。

console.log('\u{20BB7}'); // 𠮷

console.log('\u{41}\u{42}\u{43}'); // ABC

let hello = 123;
console.log(hell\u{6F}); // 123

console.log('\u{1F680}' === '\uD83D\uDE80'); // 🚀 === 🚀

六种表示字符的方法

console.log('\z' === 'z');    // true
console.log('\172' === 'z'); // true
console.log('\x7A' === 'z'); // true
console.log('\u007A' === 'z'); // true
console.log('\u{7A}' === 'z'); // true

字符串遍历器接口

在ES6中，字符串可以被for...of循环遍历。

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

除了遍历字符串，遍历器可以识别大于0xFFFF的码点，传统的for循环是无法识别的。

• 传统for循环

const text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++){
  console.log(text[i]);
}
// ''

• for...of迭代器

const text = String.fromCodePoint(0x20BB7);
    for (const i of text) {
      console.log(i);
    }
// '𠮷'

允许直接输入字符以及字符的转义形式

在JavaScript中，有5个字符串不能直接使用，只能使用转义形式。

1. U + 005C : 反斜杠（\\）
2. U + 000D : 回车（\r）
3. U + 2028 : 行分隔符
4. U + 2029 : 段分隔符
5. U + 000A : 换行符（\n）

对于这五个字符来说，不能直接使用，需要写成转义形式或者码点形式

在JSON格式允许字符串里面直接使用U+2028 和 U + 2029，此时在使用JSON.parse解析的时候，就有可能会报错。

JSON.stringify()的改造

根据标准，JSON 的数据必须是 UTF-8 的。为了确保返回的是合法的 UTF-8 字符，ES2019 改变了JSON.stringify()的行为，如果遇到 0xD800到0xDFFFF之间的单个码点或者不存在的配对形式，则返回转义字符，留给应用自己下一处理。

模版字符串

定义

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

• 普通的字符串

`demo '\n' is demo`;

• 多行字符串

`demo is 
demo`

• 字符串中嵌入变量

const name = 'demo';
console.log(`${name} is demo`);

如果字符串模版中使用反引号，则前面要用反斜杠转义（\`）

如果使用多行字符串，那么字符串中的空格、缩进都会保留

模版字符串中嵌入的变量要写在${}之中，除了变量之外，还可以进行运算、JavaScript 表达式、引用对象属性、调用函数。

模版编译

通过模版字符串生成正式模版的实例

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

在上面的代码中，放置了一个常规模版，这个模版使用<%...%>放置Javascript代码，使用<%=...%>输出JavaScript表达式

编译：

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

标签模版

标签模版（tagged template）：模版字符串可以紧跟在一个函数名后面，这个函数将被调用来处理这个模版字符串。

标签模版其实不是模版，而是函数的另一种调用方式。“标签”指的就是函数，紧跟在后面的模版字符串就是函数的参数。

简单的例子：

alter`123`;
// 等同于
alter(123);

标签模版的应用

• 过滤HTML字符串，放置用户恶意输入内容。
• 国际化处理
• 内嵌其他语言

模版字符串的限制

标签模版里面，可以内嵌其他语言，但是模版字符串默认会将字符串转义，导致无法嵌入其他语言。

为了解决这个问题，在***ES2018***中，标签模版里面的字符串转义时遇到不合法的字符串转义，就返回undefined,而不是报错。并且可以从raw属性上面得到原始字符串。

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

需要注意的是，这种解决办法只在使用标签模版时生效，不是标签模版的依旧会报错。

备注：本文是自己学习阮一峰老师的《ECMAScript 6 入门》所做的笔记，大部分例子来源于此书。