ES6 - 模板字符串、标签模板

• 模板字符串可以嵌套
• 模板字符串可以用 ${} 直接使用变量或调用函数，不需要传统的拼接
• 模板字符串本来就是字符串，可以使用字符串的一些方法如：join，trim
• 模板字符串 ${} 里面可以使用表达式

    function fn() {
        return `<li>都是名人</li>`;
    }
    const name = ['赵四','刘能'];
    const str = `
                    <ul>
                        ${name.map(item => `<li>${item}</li>`).join('')}
                        ${fn()}
                    </ul>
                `.trim();

标签模板：

    function fn(s, ...v) {  // 字符串模板被当作参数传入fn函数了
        console.log(arguments);
        // Arguments(3) [Array(3), "赵四", "刘能"]
        // Array(3) [00, 喜欢, 11] --- 如果字符串模板中没有00和11，此处打印出来就是两个空和喜欢
        const span = v.map(value => `<span style="background: palegreen">${value}</span>`);
        return s.reduce((p, c, i) => `${p}${c}${span[i] || ''}`, '');
    }
    const name = ['赵四','刘能'];
    const str = fn` 00
                    ${name[0]}
                    喜欢
                    ${name[1]}
                    11
                `;
    console.log(str);
    document.body.innerHTML = str;

image.png

image.png