在 JavaScript 中插入字符串中的变量

作者

在 JavaScript 中的字符串中插入变量

Interpolate Variable in a String in JavaScript

使用模板文字在字符串中插入变量，例如
hello ${myVar}.

模板文字用反引号分隔，并允许我们使用美元符号和花括号${expression}语法嵌入变量和表达式。

索引.js
const name = 'Tom';

const result = `Hello, ${name}!`;

console.log(result); // 👉️ 'Hello, Tom!'

我们使用
模板文字
在字符串中插入变量。

请注意，字符串包含在反引号 “ 中，而不是单引号中。

美元符号和花括号语法允许我们使用被评估的占位符。

索引.js
const num = 50;

const result = `${num + 50} percent`;

console.log(result); // 👉️ 100 percent

默认情况下，模板文字将各个部分连接成一个字符串。

任何使用美元符号和花括号${}
语法传递的表达式都会被评估。

索引.js
const num = 50;

const result = `50 divided by 10 is:  ${50 / 10}`;
console.log(result); // 👉️ '50 divided by 10 is: 5'

您还可以使用模板文字在多行字符串中插入变量。

索引.js
const color1 = 'red';
const color2 = 'blue';

const poem = `roses are ${color1}
violets are ${color2}`;

console.log(poem);
// 👉️ roses are red
// 👉️ violets are blue

这非常有用，因为我们不必在每一行都添加换行符，这与连接字符串时相反：

索引.js
const poem = 'roses are ' + color1 + '\n' +
'violets are ' + color2;

console.log(poem);
// 👉️ roses are red
// 👉️ violets are blue

由于模板文字包含在反引号 “ 中，如果您的字符串包含反引号字符，则必须使用反斜杠对其进行转义。

索引.js
const num1 = 'one';
const num2 = 'two';

const escaped = `${num1}\`${num2}`;
console.log(escaped); // 👉️ 'one`two'

您甚至可以在模板文字中调用函数。

索引.js
function subtract(a, b) {
  return a - b;
}

const result = `10 - 5 is equal to: ${subtract(10, 5)}`;
console.log(result); // 👉️ 10 - 5 is equal to: 5

当您在字符串中插入变量时必须合并逻辑时，美元符号花括号语法非常强大。

下面是将三元运算符
与模板文字一起使用的示例
。

索引.js
const color1 = 'blue';
const color2 = 'red';

const result = `${color1.length > color2.length ? color1 : color2}`;

console.log(result); // 👉️ blue

三元运算符基本上是一个if/else语句。问号之前的部分被评估，如果它返回true，它返回冒号之前的值，否则，它返回冒号之后的值。

您还可以在模板文字中使用逻辑或 (||) 和逻辑与 (&&) 运算符。

索引.js
const num1 = 0;
const num2 = 100;

const result = `${num1 || num2}`;
console.log(result); // 👉️ 100

逻辑 OR (||) 运算符如果为真，则返回左侧的值，否则返回右侧的值。

下面是对模板文字使用逻辑与 (&&) 运算符的示例。

索引.js
const bool = true;
const str = 'hello';

const result = `${bool && str}`;
console.log(result); // 👉️ hello

逻辑与 (&&) 运算符如果为假，则返回左侧的值，否则返回右侧的值。

这些是在字符串中插入变量或表达式的最常用方法。使用模板文字时，您可以合并函数调用和各种逻辑。

–