字符串的扩展
提示:以下是本篇文章正文内容,下面案例可供参考
一、字符的 Unicode 表示法
1.什么是Unicode
因为 ASCII 码一共只定义了 128个字符,只能够满足英文中的字符,对于其他语言,这是远远不够的,于是为了统一全世界的标准,Unicode出现了,Unicode定义了世界上所有语言的所有字符。Unicode没有规定字符对应的二进制码如何存储,也就是说Unicode有很多种编码方式,例如我们常用的UTF-8。
2.Unicode表示法
ES6 加强了对 Unicode 的支持,允许采用 \uxxxx
的形式表示一个字符,其中xxxx表示字符的unicode码点
"\u0061" // a
但是这种表示法只局限于码点在 \u0000~\uffff 之间的字符,超出这个范围的字符,必须用两个双字节的形式表示
“\uD842\uDFB7”
// “𠮷”
"\u20BB7"
// " 7" 这里是因为如果在\u后面跟上超过0xFFFF的数值
// 比如 \u20BB7 (5位数惹) js会理解成 \u20BB + 7
// 又因为前面那个字符是一个不可打印字符,
// 所以只会显示一个空格,后面再加一个7
ES6对这一点进行了改进,只要将码点放入大括号内,就能正确解读该字符。
"\u{20BB7}"
// "𠮷"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true 说明 大括号表示法 与 四字节的 UTF-16编码是等价的
3.JS表示字符的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);
}
// "𠮷" 可以识别
三、\u2028 和 \u2029
js字符串允许直接输入字符,以及输入字符的转义形式,即
'中' === '\u4e2d' // true
但是,js规定有5个字符,不能再字符串里面直接使用,只能使用转义形式
- U+005C:反斜杠
- U+000D:回车
- U+2028:分隔符
- U+2029:段分割符
- U+000A:换行符
就是,字符串里面不能直接包含这些个字符,比如不能直接包含反斜杠,必须要转义写成 \\
或者 \u005c
这个规定本身妹有问题,麻烦在于json格式允许字符串直接使用U+2028(行分隔符)和U+2029(段分隔符)。这样一来,服务器输出的json被json.parse解析,就有可能直接报错
const json = '"\u2028"';
JSON.parse(json); // 可能报错
JSON 格式已经冻结,没法修改,为了消除这个报错,ES2019预计允许js字符串直接输入U+2028(行分隔符)和U+2029(分隔符)
const PS = eval("'\u2029'"); 不会报错
注意,模板字符串现在就允许直接输入这两个字符。另外,正则表达式依然不允许直接输入这两个字符,这是没有问题的,因为 JSON 本来就不允许直接包含正则表达式。
四、JSON.stringify() 的改造
根据标准,JSON数据必须是UTF-8编码。但是现在的JSON.stringify()方法有可能返回不符合UTF-8标准的字符串
具体来说,UTF-8标准规定,0xD800到0xDFFF之间的码点,不能单独使用,必须配对使用,代表字符:𝌆 这是为了表示码点大于0xFFFF的字符的一种变通方法。单独使用这个区间的码点是不合法的,颠倒顺序也不行!
JSON.stringify() 的问题在于,它可能返回0xD800到0xDFFF之间的单个码点
为了确保返回的是合法的UTF-8字符,ES2019改版了JSON.stringify()的行为。如果遇到0xD800到0xDFFF之间的单个码点,或者不存在的配对形式,它会返回转义字符串,留给应用自己决定下一步的处理。
JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834"" !!!!!
五、模板字符串
传统的js语言,输出模板通常是这样写的
$('#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!
`);
模板字符串是增强版的字符串,用反引号 `` `来标识。它可以当作普通字符串来使用,也可以用来定义多行字符串,或者在字符串嵌入变量。
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出中!
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
// 如果不想要换行可以使用trim方法来消除!
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
模板字符串中嵌入变量,需要将变量名写在 ${}
之中
大括号内部可以放入任意的js表达式,可以进行运算,以及引用对象的属性
模板字符串组织中还能调用函数
如果大括号中的值不是字符串,将按照一般规则转为字符串。比如大括号中是一个对象,将默认调用对象的toString方法
如果模板字符串中的变量妹有声明,将报错
模板字符串还能嵌套
如果需要引用模板字符串本身,在需要时执行,可以写成函数
let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!" 执行后会返回该字符串
模板编译,通过模板字符串,编译生成正式模板
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 parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
// <ul>
// <li>broom</li>
// <li>mop</li>
// <li>cleaner</li>
// </ul>
标签模板
模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为标签模板功能
alert`hello`
// 等同于
alert(['hello'])
标签模板其实不是模板,而是函数调用的一种特殊形式。标签指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是如果模板字符里面有变量,就不是简单的调用了,。而是会将模板字符串先处理成多个参数,再调用函数
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
标签模板的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容
另一个应用,就是多语言转换
模板字符串的限制
前面提到标签模板里面,可以内嵌其他语言。但是,模板字符串默认会将字符串转义,导致无法嵌入其他语言。
总结
本文主要介绍了ES6中关于字符串的扩展,包括字符的Unicode表示法、字符串的遍历器接口、\u2028 \u2029的问题、JSON.stringify()、模板字符串、标签模板。