《ECMAScript 6 入门》【三、字符串的扩展】(持续更新中……)

前言:

本篇介绍 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, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 不转义模板中的特殊字符。
    s += templateData[i];
  }
  return s;
}

var message = filterHTML`<p>${sender} 你好啊</p>`;

console.log(message);
// <p>&lt;script&gt;alert("买了个包")&lt;/script&gt;  你好啊</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)
}

作者:Vam的金豆之路

主要领域:前端开发

我的微信:maomin9761

微信公众号:前端历劫之路