JavaScript模板字符串自动调用函数——自定义标签函数

如标题所说，JS的模板字符串 `` 可以自动调用函数

1. 基础原理：标签模板

当你在 JavaScript 中用反引号（`）定义模板字符串时，如果 ​在模板字符串前紧跟一个函数名​（如 sqrt`...` ），这个函数会被自动调用，并接收模板字符串的解析结果作为参数。这就是所谓的 ​标签模板函数。

function sqrt(strings, ...values) {
  // 处理逻辑
  const number = values[0];
  return Math.sqrt(number);
}

const number = 9;
console.log(sqrt`of ${number}`); // 输出 3

function sqrt (template, ...values){
    if(template[0] === 'of'){
        return Math.sqrt(values[0])
    }
    throw new Error('Invalid syntax')
}
const number = 25;
const result = sqrt`of${number}`
console.log(result) // 输出5

2. 参数解析规则

标签函数会接收以下参数：

• ​第一个参数​：一个数组，包含模板字符串中 ​被表达式分隔后的所有字符串片段​（如 ["of ", ""]）。

• ​剩余参数​：模板字符串中 ​所有嵌入表达式（${...}）的值​（如 number 的值）。

  sqrtof ${number}; // 等价于： sqrt(["of ", ""], number); // 函数调用

3. 实际应用场景

标签模板的常见用途：

• ​国际化​（如 i18n 库处理多语言模板）
• ​样式组件​（如 styled-components 的样式模板）
• ​安全过滤​（如自动转义 HTML 的模板标签）

4. 注意事项

• ​函数名必须紧贴模板字符串​：不能有空格（如 sqrt `...` 会报错）。
• ​参数固定格式​：第一个参数是字符串数组，后续参数是表达式值。
• ​灵活性高​：可以自由定义逻辑，但需手动拼接字符串（如 strings 和 values 的组合）

总结

通过标签模板，你可以实现类似「语法糖」的高级调用方式，但记得保持可读性！