模板標(biāo)簽是一個非常重要的能力，模板字符串可以緊跟在一個函數(shù)名后面，該函數(shù)將被調(diào)用來處理這個模板字符串，舉個例子：

let x = "Hi", y = "Kevin";
var res = message`${x}, I am ${y}`;
console.log(res);

我們可以自定義 message 函數(shù)來處理返回的字符串:

// literals 文字
// 注意在這個例子中 literals 的第一個元素和最后一個元素都是空字符串
function message(literals, value1, value2) {
    console.log(literals); // [ "", ", I am ", "" ]
    console.log(value1); // Hi
    console.log(value2); // Kevin
}

我們利用這些參數(shù)將其拼合回去：

function message(literals, ...values) {
    let result = "";

    for (let i = 0; i < values.length; i++) {
        result += literals[i];
        result += values[i];
    }

    result += literals[literals.length - 1];

    return result;
}

你也可以這樣寫：

function message(literals, ...values) {
    let result = literals.reduce((prev, next, i) => {
        let value = values[i - 1];
        return prev + value + next;
    });

    return result;
}

學(xué)著拼合回去是一件非常重要的事情，因?yàn)槲覀兘?jīng)過各種處理，最終都還是要拼回去的……

講完了基礎(chǔ)，我們可以來看一些實(shí)際的需求：

let message = `
    Hi,
    Daisy!
    I am
    Kevin.
`;

出于可讀性或者其他原因，我希望書寫的時候是換行的，但是最終輸出的字符是在一行，這就需要借助模板標(biāo)簽來實(shí)現(xiàn)了，我們嘗試寫一個這樣的函數(shù)：

// oneLine 第一版
function oneLine(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {
        let expression = expressions[i - 1];
        return prev + expression + next;
    });

    result = result.replace(/(s+)/g, " ");
    result = result.trim();

    return result;
}

實(shí)現(xiàn)原理很簡單，拼合回去然后將多個空白符如換行符、空格等替換成一個空格。

使用如下：

let message = oneLine `
    Hi,
    Daisy!
    I am
    Kevin.
`;
console.log(message); // Hi, Daisy! I am Kevin.

不過你再用下去就會發(fā)現(xiàn)一個問題，如果字符間就包括多個空格呢？舉個例子：

let message = oneLine`
  Preserve eg sentences.  Double
  spaces within input lines.
`;

如果使用這種匹配方式，sentences. 與 Double 之間的兩個空格也會被替換成一個空格。

我們可以再優(yōu)化一下，我們想要的效果是將每行前面的多個空格替換成一個空格，其實(shí)應(yīng)該匹配的是換行符以及換行符后面的多個空格，然后將其替換成一個空格，我們可以將正則改成：

result = result.replace(/(
s*)/g, " ");

就可以正確的匹配代碼。最終的代碼如下：

// oneLine 第二版
function oneLine(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {
        let expression = expressions[i - 1];
        return prev + expression + next;
    });

    result = result.replace(/(
s*)/g, " ");
    result = result.trim();

    return result;
}

假設(shè)有這樣一段 HTML：

let html = `
    1
    2
        3
`;

為了保持可讀性，我希望最終輸入的樣式為：

1
2
3

其實(shí)就是匹配每行前面的空格，然后將其替換為空字符串。

// stripIndents 第一版
function stripIndents(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {
        let expression = expressions[i - 1];
        return prev + expression + next;
    });


    result = result.replace(/
[^S
]*/g, "
");
    result = result.trim();

    return result;
}

最難的或許就是這個正則表達(dá)式了：

result = result.replace(/
[^S
]*/g, "
");

S 表示匹配一個非空白字符

[^S ] 表示匹配非空白字符和換行符之外的字符，其實(shí)也就是空白字符去除換行符

[^S ]* 表示匹配換行符以及換行符后的多個不包含換行符的空白字符

replace(/ [^S ]*/g, " ") 表示將一個換行符以及換行符后的多個不包含換行符的空白字符替換成一個換行符，其實(shí)也就是將換行符后面的空白字符消掉的意思

其實(shí)吧，不用寫的這么麻煩，我們還可以這樣寫：

result = result.replace(/^[^S
]+/gm, "");

看似簡單了一點(diǎn)，之所以能這樣寫，是因?yàn)槠ヅ淠Ｊ降木壒剩銜l(fā)現(xiàn)，這次除了匹配全局之外，這次我們還匹配了多行，m 標(biāo)志用于指定多行輸入字符串時應(yīng)該被視為多個行，而且如果使用 m 標(biāo)志，^ 和 $ 匹配的開始或結(jié)束是輸入字符串中的每一行，而不是整個字符串的開始或結(jié)束。

¹ 表示匹配空白字符去除換行符

^²+ 表示匹配以去除換行符的空白字符為開頭的一個或者多個字符

result.replace(/^³+/gm, "") 表示將每行開頭一個或多個去除換行符的空白字符替換成空字符串，也同樣達(dá)到了目的。

最終的代碼如下：

// stripIndents 第二版
function stripIndents(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {
        let expression = expressions[i - 1];
        return prev + expression + next;
    });


    result = result.replace(/^[^S
]+/gm, "");
    result = result.trim();

    return result;
}

注意，這次的 stripIndent 相比上面一節(jié)的標(biāo)題少了一個字母 s，而我們想要實(shí)現(xiàn)的功能是：

let html = `
    

        
1
        
2
        
3
    

`;

其實(shí)也就是去除第一行的換行以及每一行的部分縮進(jìn)。

這個實(shí)現(xiàn)就稍微麻煩了一點(diǎn)，因?yàn)槲覀円嬎愠雒恳恍械降滓コ嗌賯€空白字符。

實(shí)現(xiàn)的思路如下：

使用 match 函數(shù)，匹配每一行的空白字符，得到一個包含每一行空白字符的數(shù)組

數(shù)組遍歷比較，得到最小的空白字符長度

構(gòu)建一個正則表達(dá)式，然后每一行都替換掉最小長度的空白字符

實(shí)現(xiàn)的代碼如下：

let html = `
    

        
1
        
2
        
3
    

`;


function stripIndent(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {
        let expression = expressions[i - 1];
        return prev + expression + next;
    });

    const match = result.match(/^[^S
]*(?=S)/gm);
    console.log(match); // Array [ "    ", "        ", "        ", "        ", "    " ]

    const indent = match && Math.min(...match.map(el => el.length));
    console.log(indent); // 4

    if (indent) {
        const regexp = new RegExp(`^.{${indent}}`, "gm");
        console.log(regexp); // /^.{4}/gm

        result =  result.replace(regexp, "");
    }

    result = result.trim();

    return result;
}

值得一提的是，我們一般會以為正則中 . 表示匹配任意字符，其實(shí)是匹配除換行符之外的任何單個字符。

最終精簡的代碼如下：

function stripIndent(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {
        let expression = expressions[i - 1];
        return prev + expression + next;
    });

    const match = result.match(/^[^S
]*(?=S)/gm);
    const indent = match && Math.min(...match.map(el => el.length));

    if (indent) {
        const regexp = new RegExp(`^.{${indent}}`, "gm");
        result =  result.replace(regexp, "");
    }

    result = result.trim();

    return result;
}

前面我們講到為了避免 ${} 表達(dá)式中返回一個數(shù)組，自動轉(zhuǎn)換會導(dǎo)致多個逗號的問題，需要每次都將數(shù)組最后再 join("") 一下，再看一遍例子：

let arr = [{value: 1}, {value: 2}];
let message = `
    

        ${arr.map((item) => {
            return `
                
${item.value}
            `
        }).join("")}
    
`;
console.log(message);

利用標(biāo)簽?zāi)０?，我們可以輕松的解決這個問題：

function includeArrays(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {

        let expression = expressions[i - 1];

        if (Array.isArray(expression)) {
            expression = expression.join("");
        }

        return prev + expression + next;
    });

    result = result.trim();

    return result;
}

你會發(fā)現(xiàn)以上這些函數(shù)拼合的部分都是重復(fù)的，我們完全可以將其封裝在一起，根據(jù)不同的配置實(shí)現(xiàn)不能的功能。如果你想在項(xiàng)目中使用這些函數(shù)，可以自己封裝一個或者直接使用 common-tags。

ES6 系列目錄地址：https://github.com/mqyqingfen...。

ES6 系列預(yù)計寫二十篇左右，旨在加深 ES6 部分知識點(diǎn)的理解，重點(diǎn)講解塊級作用域、標(biāo)簽?zāi)０?、箭頭函數(shù)、Symbol、Set、Map 以及 Promise 的模擬實(shí)現(xiàn)、模塊加載方案、異步處理等內(nèi)容。

如果有錯誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，請?wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎star，對作者也是一種鼓勵。