前言:
本篇介绍 ES6 对字符串的改造和增强。
一、字符的 Unicode 表示法
字符的 Unicode 码点必须在\u0000~\uFFFF
之间,\uxxxx
形式表示一个字符,其中xxxx
表示字符的 Unicode 码点。
const {log} = console; log('\u0061'); //a
xxxx
超出这个范围的字符,只要将码点放入{}
内,就能正确解读该字符。
const {log} = console; log('\u{20BB6}'); //𠮶
二、字符串的遍历器接口
字符串添加了遍历器接口,使得字符串可以被for...of
循环遍历。
for (let codePoint of 'mm') { console.log(codePoint) // m // m }
let text = String.fromCodePoint(0x20BB6); for (let codePoint of text) { console.log(codePoint) //𠮶 }
三、特殊字符的处理(直接输入 U+2028 和 U+2029)
JavaScript 规定有5个字符,不能在字符串里面直接使用,只能使用转义形式, 字符串里面不能直接包含反斜杠,一定要转义写成\\
或者\u005c
。
\u005c
:反斜杠(reverse solidus)\u000d
:回车(carriage return)\u2028
:行分隔符(line separator)\u2029
:段分隔符(paragraph separator)\u000a
:换行符(line feed)
现在,
const {log} = console; const PS = eval("'\u2029'"); log(PS); // 段分隔符
const {log} = console; const PS = eval("'\u2028'"); log(PS); // 行分隔符
注意: 模板字符串现在就允许直接输入这两个字符。另外,正则表达式依然不允许直接输入这两个字符,这是没有问题的,因为 JSON 本来就不允许直接包含正则表达式。
四、模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。模板字符串中嵌入变量,需要将变量名写在 ${} 之中。大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。模板字符串之中还能调用函数。
// 字符串中嵌入变量 let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
let x = 1; let y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3"
function fn() { return "Hello World"; } `foo ${fn()} bar`
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `);
<ul>
标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。
$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `.trim());
模板字符串甚至还能嵌套。
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: 'Lars', last: '<Croft>' }, ]; console.log(tmpl(data)); // <table> // // <tr><td><Jane></td></tr> // <tr><td>Bond</td></tr> // // <tr><td>Lars</td></tr> // <tr><td><Croft></td></tr> // // </table>
模板字符串写成了一个函数的返回值。执行这个函数,就相当于执行这个模板字符串了。
let func = (name) => `Hello ${name}!`; func('Jack') // "Hello Jack!"
五、标签模板
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
alert`hello` // 等同于 alert(['hello'])
let name = '黑子', age = 8, message = tag`我的宠物狗叫${name},今年${age}岁了`; function tag(stringArr, value1, value2) { console.log(stringArr); //["我的宠物狗叫", ",今年", "岁了", raw: Array(3)] //该数组有一个raw属性,保存的是转义后的原字符串 console.log(value1); // 黑子 console.log(value2); // 8 return; }
应用1:过滤HTML字符串,防止用户输入恶意内容
var sender = '<script>alert("买了个包")</script>'; // 恶意代码 var message = filterHTML`<p>${sender} 你好啊</p>`; function filterHTML(templateData) { var s = templateData[0]; for (var i = 1; i < arguments.length; i++) { var arg = String(arguments[i]); // 转义占位符中的特殊字符。 s += arg.replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">"); // 不转义模板中的特殊字符。 s += templateData[i]; } return s; } var message = filterHTML`<p>${sender} 你好啊</p>`; console.log(message); // <p><script>alert("买了个包")</script> 你好啊</p>
应用2:多语言转换(国际化处理)
let name = 'ES6专栏 '; let number = 666; let chinese = ['欢迎访问','您是第','位访问者']; i18n`Welcome to ${name}, you are the ${number} visitor`; function i18n(stringArr, ...values){ let str=''; stringArr.map((item,index)=>{ str += (chinese[index] + (values[index] ? values[index] : '' )) }); console.log(str) }