js 如何替换字符模板中的变量

结论： 在 JavaScript 中，可以通过字符串模板、正则表达式或手动替换等方式，将字符模板中的变量替换成实际值。

详细展开

1. 使用模板字符串（推荐）

ES6 引入了模板字符串功能，可以直接在字符串中嵌入变量，这是最简洁和现代的方式。

语法：

let name = "Alice";
let age = 25;

let template = `你好, ${name}! 你今年 ${age} 岁了。`;
console.log(template);
// 输出: 你好, Alice! 你今年 25 岁了。

特点：

使用反引号（`）定义模板字符串。
使用 ${} 插入变量或表达式。

2. 使用正则表达式替换占位符

如果需要处理旧版浏览器不支持的模板字符串，或者需要更灵活的占位符替换逻辑，可以使用正则表达式。

示例：

let template = "你好, {{name}}! 你今年 {{age}} 岁了。";

let data = {
  name: "Alice",
  age: 25
};

let result = template.replace(/{{\s*([^}]+)\s*}}/g, (match, key) => {
  return data[key] !== undefined ? data[key] : match; // 如果键不存在，保留原占位符
});

console.log(result);
// 输出: 你好, Alice! 你今年 25 岁了。

解释：

正则表达式 /{{\s*([^}]+)\s*}}/g 匹配类似 {{key}} 的占位符。
replace 方法的回调函数根据占位符的键名从 data 对象中获取对应的值。

3. 手动替换占位符

对于简单的场景，可以直接通过多次调用 replace 方法来替换占位符。

示例：

let template = "你好, {name}! 你今年 {age} 岁了。";

let data = {
  name: "Alice",
  age: 25
};

for (let key in data) {
  template = template.replace(new RegExp(`{${key}}`, 'g'), data[key]);
}

console.log(template);
// 输出: 你好, Alice! 你今年 25 岁了。

解释：

使用 new RegExp 动态生成正则表达式。
遍历 data 对象，逐一替换模板中的占位符。

4. 使用第三方库（如 Lodash）

如果你的项目中已经引入了第三方库（如 Lodash），可以利用其提供的工具函数简化操作。

示例：

const _ = require("lodash");

let template = "你好, <%= name %>! 你今年 <%= age %> 岁了。";

let data = {
  name: "Alice",
  age: 25
};

let result = _.template(template)(data);

console.log(result);
// 输出: 你好, Alice! 你今年 25 岁了。