《ECMAScript 6 入門》【三、字符串的擴(kuò)展】（持續(xù)更新中……）

前言：

本篇介紹 ES6 對(duì)字符串的改造和增強(qiáng)。
一、字符的 Unicode 表示法

字符的 Unicode 碼點(diǎn)必須在\u0000~\uFFFF之間，\uxxxx形式表示一個(gè)字符，其中xxxx表示字符的 Unicode 碼點(diǎn)。

const {log} = console;
log('\u0061'); //a


xxxx超出這個(gè)范圍的字符，只要將碼點(diǎn)放入{}內(nèi)，就能正確解讀該字符。

const {log} = console;
log('\u{20BB6}'); //??



二、字符串的遍歷器接口

字符串添加了遍歷器接口，使得字符串可以被for...of循環(huán)遍歷。

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 規(guī)定有5個(gè)字符，不能在字符串里面直接使用，只能使用轉(zhuǎn)義形式，
字符串里面不能直接包含反斜杠，一定要轉(zhuǎn)義寫成\\或者\(yùn)u005c。

    \u005c：反斜杠（reverse solidus)
    \u000d：回車（carriage return）
    \u2028：行分隔符（line separator）
    \u2029：段分隔符（paragraph separator）
    \u000a：換行符（line feed）

現(xiàn)在，

const {log} = console;
const PS = eval("'\u2029'");
log(PS); // 段分隔符


const {log} = console;
const PS = eval("'\u2028'");
log(PS); // 行分隔符



注意： 模板字符串現(xiàn)在就允許直接輸入這兩個(gè)字符。另外，正則表達(dá)式依然不允許直接輸入這兩個(gè)字符，這是沒(méi)有問(wèn)題的，因?yàn)?JSON 本來(lái)就不允許直接包含正則表達(dá)式。
四、模板字符串

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量。模板字符串中嵌入變量，需要將變量名寫在 ${} 之中。大括號(hào)內(nèi)部可以放入任意的 JavaScript 表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性。模板字符串之中還能調(diào)用函數(shù)。

// 字符串中嵌入變量
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`



如果使用模板字符串表示多行字符串，所有的空格和縮進(jìn)都會(huì)被保留在輸出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);



<ul>標(biāo)簽前面會(huì)有一個(gè)換行。如果你不想要這個(gè)換行，可以使用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>



模板字符串寫成了一個(gè)函數(shù)的返回值。執(zhí)行這個(gè)函數(shù)，就相當(dāng)于執(zhí)行這個(gè)模板字符串了。

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



五、標(biāo)簽?zāi)０?br>
標(biāo)簽?zāi)０迤鋵?shí)不是模板，而是函數(shù)調(diào)用的一種特殊形式?！皹?biāo)簽”指的就是函數(shù)，緊跟在后面的模板字符串就是它的參數(shù)。

alert`hello`
// 等同于
alert(['hello'])


let  name = '黑子',
     age = 8,
     message = tag`我的寵物狗叫${name}，今年${age}歲了`;

function tag(stringArr, value1, value2) {
    console.log(stringArr);  //["我的寵物狗叫", "，今年", "歲了", raw: Array(3)]
                             //該數(shù)組有一個(gè)raw屬性，保存的是轉(zhuǎn)義后的原字符串
    console.log(value1);     // 黑子
    console.log(value2);     // 8
    return;
}


應(yīng)用1：過(guò)濾HTML字符串，防止用戶輸入惡意內(nèi)容

var sender = '<script>alert("買了個(gè)包")</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]);
    // 轉(zhuǎn)義占位符中的特殊字符。
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 不轉(zhuǎn)義模板中的特殊字符。
    s += templateData[i];
  }
  return s;
}

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

console.log(message);
// <p>&lt;script&gt;alert("買了個(gè)包")&lt;/script&gt;  你好啊</p>


應(yīng)用2：多語(yǔ)言轉(zhuǎn)換（國(guó)際化處理）

let name = 'ES6專欄 ';  let  number = 666;  
let chinese = ['歡迎訪問(wèn)','您是第','位訪問(wèn)者'];

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的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路