面试题：JavaScript中模板标签的基本用法

Question

请简述JavaScript模板标签的基本语法，并举例说明如何使用模板标签实现字符串的简单拼接与变量插入。

Answer 1

基本语法

模板标签是一种函数调用语法，它以一个函数名开头，后跟一个模板字面量。语法如下：

function myTagFunction(strings, ...values) {
    // 处理逻辑
}

let name = 'John';
let result = myTagFunction`Hello, ${name}!`;

在上述代码中，myTagFunction 是标签函数，strings 是一个包含模板字面量中静态部分的数组，...values 是一个包含模板字面量中插值表达式结果的数组。

字符串拼接与变量插入示例

function simpleConcat(strings, ...values) {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            result += values[i];
        }
    }
    return result;
}

let greeting = 'Hello';
let name = 'Alice';
let message = simpleConcat`${greeting}, ${name}!`;
console.log(message); 

上述代码定义了 simpleConcat 标签函数，通过它实现了字符串拼接与变量插入。在使用时，模板字面量中的 ${greeting} 和 ${name} 被替换为对应变量的值，并最终拼接成完整的字符串。