JavaScript - 用变量替换所有内容

当我们需要修改多个地方的文本内容时，手动一个一个地修改会非常繁琐。而使用变量来替代这些文本内容就会变得非常简单。

字符串模板

JavaScript中有一种叫做字符串模板（template strings）的语法，可以很方便地替换文本内容。使用字符串模板需要用反引号（`）来包裹字符串，并用${}来插入变量。

const name = 'John';
const age = 28;

const message = `My name is ${name} and I'm ${age} years old.`;

console.log(message); // 输出 My name is John and I'm 28 years old.

上述代码中，我们用变量name和age分别替代了字符串中的占位符${name}和${age}，从而得到了一个完整的字符串。

replace()方法

如果我们需要替换一个字符串中的所有某个文本内容，我们可以使用replace()方法。

const str = 'Hello World! World is beautiful.';

const newStr = str.replace(/World/g, 'JavaScript');

console.log(newStr); // 输出 Hello JavaScript! JavaScript is beautiful.

上述代码中，我们先定义了一个字符串str，其中包含了两个World。我们使用replace()方法并传入一个正则表达式/g来匹配所有的World，然后用JavaScript来替代它们，从而得到了一个新的字符串newStr。

示例代码

下面是一个用变量替换所有内容的示例代码：

const name = 'John';
const age = 28;
const job = 'programmer';

const str = 'Hello, I am ${name}, and I am ${age} years old. I work as a ${job}. ${name} likes ${job}ing.';

const newStr = str.replace(/\${([^}]*)}/g, (match, varName) => {
  return eval(varName);
});

console.log(newStr);

其中，我们先定义了三个变量name、age和job，分别表示姓名、年龄和职业。然后，我们定义了一个字符串str，其中包含了三个占位符${name}、${age}和${job}，我们想要用上述变量来替代它们。

replace()方法接受两个参数，第一个参数是匹配用的正则表达式，第二个参数是一个回调函数，用来生成替代文本。

我们使用正则表达式/${([^}]*)}/g来匹配所有的占位符${}，并且用(eval(varName))返回占位符中的变量。最后得到了一个新的字符串newStr。

最终输出的结果将会是：

Hello, I am John, and I am 28 years old. I work as a programmer. John likes programming.

结论

在JavaScript中，我们可以使用字符串模板和replace()方法来很方便地替换文本内容。如果我们需要替换多个占位符，并且使用变量来替代这些占位符，我们可以使用上面示例代码中的方法来实现。