ES6之模版字符串的具体使用

当我们需要将一些字符串拼接在一起时，通常会使用 + 号操作符或字符串模板生成函数。在ES6中，我们还可以使用模版字符串来进行字符串的拼接。

模版字符串使用反引号( )来包含字符串，并使用${}`来嵌入变量或表达式。例如：

const name = "Lucy";
console.log(`Hello, ${name}!`);
//输出："Hello, Lucy!"

以下是ES6之模版字符串的具体使用攻略：

基本用法

使用模版字符串包含字符串时，可以保留原始空格和缩进，如下所示：

const content = `第一行
    第二行
    第三行`;
console.log(content);
// 输出：
// 第一行
//     第二行
//     第三行

同时，也可以在模版字符串中调用函数或表达式：

const num1 = 10;
const num2 = 20;
console.log(`The sum is ${num1 + num2}.`);
//输出："The sum is 30."

嵌套

模版字符串也可以嵌套使用，例如：

const title = "ES6之模版字符串的具体使用";
const content = `
<h1>${title}</h1>
<p>模版字符串是一种新的字符串语法，它可以包含表达式，以及可以保留原始的换行符和空格。</p>
`;
console.log(content);
//输出：
// <h1>ES6之模版字符串的具体使用</h1>
// <p>模版字符串是一种新的字符串语法，它可以包含表达式，以及可以保留原始的换行符和空格。</p>

注意：在嵌套使用模板字符串时，需要注意转义字符的使用。

标签模版

标签模版是一种特殊的模版字符串，它可以通过一个函数来处理模版字符串。在调用标签模版时，该函数会接收到一个被拆分成多个字符串和变量解析后的数组，并返回一个新的字符串。

例如：

function processTag(strings, ...values){
    console.log(strings);
    console.log(values);
    return `${strings[0]}${values[1]}${strings[1]}`;
}

const num1 = 10;
const num2 = 20;
const result = processTag`The sum of ${num1} and ${num2} is ${num1 + num2}.`;
console.log(result);
//输出："The sum of  and  is 30."

在上面的例子中，模版字符串被拆分并传递给了 processTag 函数。processTag 函数接收到三个参数：一个字符串数组 strings, 和两个变量 num1 和 num2。最后，返回一个新的字符串，该字符串由字符串数组中的第一项，num2 和字符串数组中的第二项组成。

示例1

//计算矩形面积
function getArea(width, height){
    return width * height;
}
const width = 10;
const height = 20;
console.log(`The area of the rectangle is ${getArea(width, height)}.`);
//输出："The area of the rectangle is 200."

在上面的例子中，模版字符串包含了一个函数调用，该函数计算矩形面积。函数调用的结果被包含在模板字符串中。

示例2

//使用标签模板处理模板字符串
function processHTML(strings, ...values){
    let html = "";
    for(let i = 0; i < values.length; i++){
        html += strings[i];
        html += `<strong>${values[i]}</strong>`;
    }
    html += strings[strings.length - 1];
    return html;
}

const name = "Lucy";
const age = 20;
const gender = "female";

const result = processHTML`
    <div>
        <p>Name: ${name}</p>
        <p>Age: ${age}</p>
        <p>Gender: ${gender}</p>
    </div>
`;

console.log(result);

在上面的例子中，processHTML 函数将模版字符串转换为一个包含 HTML 标记的字符串，并返回该字符串。注意，processHTML 函数在处理模版字符串时，保留了模版字符串中的换行符和缩进。