面试题：JavaScript模板标签在函数调用中的应用

Question

假设你有一个函数，它接收一个模板字符串作为参数，并对其中的占位符进行特定的处理（比如将占位符替换为对应的环境变量值）。请使用模板标签来实现这个函数，并解释其原理。

Answer 1

实现代码

function envReplace(templateStrings, ...values) {
    let result = '';
    for (let i = 0; i < templateStrings.length; i++) {
        result += templateStrings[i];
        if (i < values.length) {
            result += process.env[values[i]] || '';
        }
    }
    return result;
}

// 使用示例
const template = envReplace`Hello, ${'USERNAME'}. Your path is ${'PATH'}.`;
console.log(template);

原理解释

1. 模板标签的基本形式：
   • 模板标签是一种函数调用的语法糖，其形式为tagFunction`template string with ${placeholders}`。
   • 其中tagFunction是自定义的函数，在上述代码中为envReplace。template string with ${placeholders}是普通的模板字符串，其中包含占位符${}。
2. 参数传递：
   • 模板标签调用时，tagFunction的第一个参数是一个数组，包含模板字符串中除占位符外的部分。例如在envReplace`Hello, ${'USERNAME'}. Your path is ${'PATH'}.中，templateStrings数组的值为['Hello, ', '. Your path is ', '.']`。
   • tagFunction的其余参数是模板字符串中占位符表达式的值。在上述例子中，values数组的值为['USERNAME', 'PATH']。
3. 处理逻辑：
   • 在envReplace函数中，通过遍历templateStrings数组，将其中的字符串片段和对应占位符替换后的值依次拼接起来。
   • 对于占位符，尝试从process.env（Node.js 环境变量对象）中获取对应的值，如果不存在则使用空字符串。最后返回处理后的完整字符串。