面试题：JavaScript中模板标签的基础应用及变形

Question

请解释JavaScript模板标签的基本语法和用途。并编写一个示例，使用模板标签创建一个函数，该函数可以将传入的字符串首字母大写。

Answer 1

基本语法

模板标签是一种函数调用方式，它使用模板字面量作为参数。语法如下：

function myTagFunction(strings, ...values) {
    // 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 name = 'world';
let greeting = myTagFunction`Hello, ${name}!`;

用途

1. 字符串格式化：可以更方便地将变量嵌入到字符串中，替代传统的字符串拼接方式，使代码更易读。
2. 自定义字符串处理逻辑：通过模板标签函数，可以对模板字面量中的内容进行自定义处理，例如进行安全转义、国际化处理等。

示例代码

function capitalizeFirstLetter(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

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

let sentence = 'hello world';
let capitalizedSentence = capitalizeTag`The string is: ${sentence}`;
console.log(capitalizedSentence); 

这段代码中，capitalizeTag 模板标签函数将模板字面量中占位符的值首字母大写后拼接成新的字符串。