es6-模版字符串

模版字符串是es6引入的字符串操做規範，目的在於咱們能夠更加快速的書寫多行字符串，基本的字符格式化和HTML轉移等。

基本用法

用反撇號代 ` 替單引號或者雙引號：

const message = `string template`;
console.log(message);
複製代碼

多行字符串。在以前多行書寫的時候咱們會在每行末尾加上\拼接字符串，或者要顯示換行的時候加上換行符號 \n：

const msg = 'Hello \n\ word';
console.log(msg);
/* Hello world */
複製代碼

在模版字符串中咱們直接換行寫就能夠了，在反撇號中間的換行符和空白字符都會被保留：

const msg = `Hello world`;
console.log(msg);

/* Hello world */
複製代碼

字符串佔位符

模版字符串用${js表達式} 的方式提供字符串佔位，大括號中間容許任意js表達式：

const name = 'wozien';
const msg = `Hello, I am ${name}`; // Hello, I am wozien
複製代碼

由於模版字符串也屬於js表達式，因此佔位符裏面容許嵌套模版字符串：

const arr = [1, 2, 3];
const html = ` <ul> ${arr.map(val => `<li>${val}<li>`).join('')} </ul> `.trim();

console.log(html);

/* <ul> <li>1<li><li>2<li><li>3<li> </ul> */
複製代碼

上面的代碼在一個模版字符串的佔位符用 map 返回一個 li 字符串數組，最後 join 是由於模版字符串會轉化不是字符串類型的數據，好比[1,2,3] 顯示爲 1,2,3。

標籤模版

模版字符串能夠在字符串前帶上一個函數名做爲標籤，表示對後面緊跟的字符串進行處理，返回處理後結果。

const name = 'wozien';
const age = 23;
const msg = tagFun`Hello, I am ${name}, my age is ${age}`;

function tagFun(literals, ...exps) {
  console.log(literals);  // [ 'Hello, I am ', ', my age is ', '' ]
  console.log(exps);   // [ 'wozien', 23 ]
}
複製代碼

可見，標籤函數的第一個參數是佔位符分割原字符串的數組結果，第二個參數是佔位符的返回值結果數組。因而咱們能夠利用這兩個數組進行拼接，模擬字符串模版的功能：

function tagFun(literals, ...exps) {
  return literals.reduce((pre, cur, i) => {
    const value = exps[i - 1];
    return pre + value + cur;
  });
}

console.log(msg);  // Hello, I am wozien, my age is 23
複製代碼

應用

處理數組轉換。在前面 map 生成的li數組中咱們最後 join 了下，其實能夠放在標籤函數裏面處理：

function htmlTag(liters, ...exps) {
  let result = liters.reduce((pre, cur, i) => {
    let value = exps[i - 1];

    if (Array.isArray(value)) {
      value = value.join('');
    }

    return pre + value + cur;
  });

  return result.trim();
}

const arr = [1, 2, 3];
const html = htmlTag` <ul> ${arr.map(val => `<li>${val}<li>`)} </ul>`;

console.log(html);
複製代碼

有時候咱們爲了書寫好看把字符串換行寫，但實際是輸出顯示一行，咱們能夠寫一個oneLine標籤函數:

function oneLine(liters, ...exps) {
  let result = liters.reduce((pre, cur, i) => {
    let value = exps[i - 1];
    return pre + value + cur;
  });

  // 正則替換掉每行前面的空字符
  result = result.replace(/(\n\s)*/g, '');
  return result.trim();
}

const fruits = oneLine` apple, peal, banane `;

console.log(fruits);  // apple, peal, banane
複製代碼

在咱們開發中，咱們能夠把標籤函數封裝起來，根據配置作不一樣的字符串處理。相似的工具包有common-tags。

參考

ES6 系列之模板字符串

>>>原文地址