JavaScript 标签模板字符串

ES6标签模板：函数处理模板字符串、styled-components原理、String.raw原始字符串、国际化i18n标签模板、SQL注入防护标签模板 · 难度：入门 · +10XP

JavaScript 标签模板字符串 —— 函数驱动的模板

你用过模板字符串：Hello ${name}。但在模板字符串前面加一个函数名，就变成了标签模板（Tagged Template）——这个函数可以解析模板的静态部分和动态插值。

基本用法

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += <strong>${values[i]}</strong>;
    }
  });
  return result;
}
const name = '小明';
const age = 20;
const html = highlight我叫${name}，今年${age}岁。;
// 结果：我叫小明，今年20岁。

第一个参数strings是模板中所有静态部分的数组，剩余参数...values是所有插值。

实际应用

// Styled-components 就是标签模板
const Button = styled.button
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
;

// SQL注入防护
const query = sqlSELECT * FROM users WHERE id = ${userId};

动手练习

1. 基础练习：写一个safeHTML标签模板函数，对插值中的<、>、&进行HTML转义。
2. 进阶应用：写一个i18n标签模板函数，根据语言参数自动翻译静态文本。
3. 项目实战：模仿styled-components，写一个简单的CSS-in-JS标签模板，输入CSS字符串返回一个className。