JavaScript 将变量插入字符串

Nithin Krishnan 2023年1月30日 2021年4月29日
  1. 在 JavaScript 中使用模板文字将变量插入字符串
  2. 在 JavaScript 中使用基本格式将变量插入字符串
  3. 在 JavaScript 中使用 sprintf() 将变量插入字符串
  4. 结论
JavaScript 将变量插入字符串

本文将介绍如何在 JavaScript 中将变量插入字符串。

在 JavaScript 中使用模板文字将变量插入字符串

模板文字的概念在 JavaScript 中已经存在了一段时间。它们以前被称为模板字符串。ES6 中引入了模板文字。与必须使用繁琐的字符串连接相比,它提供了一种将变量嵌入给定句子中的简便方法。代替使用引号(双引号或单引号),我们使用带反引号(键盘上的`字符)定义的模板文字。我们将字符串放在反引号中,并将变量嵌入句子中。以下是模板文字的用法。

仅将字符串本身包含在一组反引号中就可以使其成为字符串值。它具有与在双引号"中保留字符串文本相同的功能。以下示例代码描述了用作模板文字的简单字符串。

console.log(`Hello World`);

输出:

Hello World

我们已经准备好正常的字符串。如果必须在此字符串中显示变量的值,则需要嵌入变量。嵌入时,我们将变量用大括号括起来,并在其前加上 $ 符号。嵌入变量值的语法是 ${variableName}。以下代码段将 eggCount 变量嵌入到普通字符串中,而整个内容都封装在反引号中。

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

输出:

On easter we decorted 20 easter eggs

嵌入涉及变量的表达式

与带有模板文字的纯字符串连接不同,我们可以包含具有多个变量的表达式,类似于使用模板文字在 JavaScript 中进行编码。如果我们需要执行某些操作,例如求和,获取子字符串(包括日期)等,则可以将所有这些功能以及更多功能嵌入带有模板文字的字符串中。下面的代码集有很多用例。

let a = 5; b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

输出:

Sum of 5 and 10 is 15

另一个涉及日期的示例如下。在这里,我们不使用任何变量,但是模板文字中包含的表达式本身可以工作。它是带有 javascript 的字符串,继续使用双引号或反引号,就像我们连接句子时一样:

console.log(`The date today is ${new Date().getDate()}-${new Date().getMonth() + 1}-${new Date().getFullYear()}`);

输出:

The date today is 7-4-2021

备注

  • 模板文字提供了将变量嵌入句子中的最简单方法之一。
  • 它还支持直接在字符串中包含表达式,并让编译器在运行时解析计算。
  • 现在,我们可以轻松地在字符串中包含单引号和双引号,而无需使用转义符。
  • 模板文字使编码简单、简洁、整齐、可读。
  • 模板文字的值可以分配给新变量。可以将其视为包含变量值的新字符串。

在 JavaScript 中使用基本格式将变量插入字符串

将变量值整齐地插入字符串的另一种方法是使用 JavaScript 支持的基本格式。使用 JavaScript console.log(),我们可以避免串联并在目标字符串中添加占位符。如下所示,将要分配的值作为参数传递。

let a = 5; b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a+b));

输出:

Sum of 5 and 10 is 15.

变量到值的这种解析仅与 console.log() 一起使用。因此,我们不能将其用于分配给其他变量,也不能将其用于在 HTML UI 中显示新的已解析字符串。

备注

  • 我们可以在使用 console.log() 函数进行记录时使用这个方法。因此,该方法不适用于将值分配给变量。因此,它可能不值得在日志以外的场景使用。
  • 使用基本格式时,字符串中使用的占位符应与作为参数传递的数据类型相对应。例如,对于显示数值,句子中的占位符应该是%d,对于字符串数据类型,应该是%s
let op1 = 5, op2 = 10, operation = "Sum";
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

输出:

Sum of 5 and 10 is 15.

如果我们忘记考虑传递的参数类型,则可能是类型不匹配。JavaScript 会尝试对变量进行类型转换,并将结果值添加到字符串中。下面的代码解释了这种现象。

let op1 = 5, op2 = 10, operation = "Sum";
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

输出:

5 of 10 and 15 is NaN.

op1 是 Number 数据类型,我们正在使用%s 将其注入到最终字符串中。%s 会自动将数字类型转换为字符串数据类型。这种转换进行得很顺利。但是对于 operation 变量,该值将分配给该序列中紧随其后的占位符。该占位符为%d。因此,此处将字符串数据类型转换为数字。转换不会发生。因此,返回的结果是 NaN,我们将其视为输出的结尾字。

我们可以在参数中使用表达式,就像在 (op1 + op2) 中看到的那样。JavaScript 理解并相应地将其解析为总和。

在这种情况下,如果不使用转义字符,则不能在最终字符串中使用双引号。但是,如果将整个结构封装在双引号中,则可以使用单引号。请看以下代码。

let op1 = 5, op2 = 10, operation = "Sum";
console.log("'%s' of %d and %d is %d.", operation, op1, op2, (op1 + op2));

输出:

'Sum' of 5 and 10 is 15.

在 JavaScript 中使用 sprintf() 将变量插入字符串

在 JavaScript ES6 中的模板文字之前,开发社区遵循了功能丰富的 sprintf.js 库。该库有一个称为 sprintf() 的方法。sprintf.js 是 JavaScript 的开源库。它具有适用于 Node.js 和浏览器的实现。有关设置和配置,你可以访问其 git-hub 页面sprintf() 用于在字符串中包含变量,而不使用字符串串联。用法如下。

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = "Sum";
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

输出:

Sum of 5 and 10 is 15.

它具有以下各种有用的特殊功能。

  • sprintf() 函数允许以不同顺序指定变量。
  • 像模板文字的功能一样,sprintf() 解析封装在字符串中的表达式。
  • 它支持多种格式。除了标准的字符串和数字之外,sprintf-js 库还支持布尔值,二进制格式等,用于将变量值输出到字符串。
  • 此外,你可以使用库提供的 vsprintf() 方法将参数指定为数组。
  • 它还允许直接在第二个参数中传递对象,并自动解析变量。

该库提供了更多功能。可以在其 GitHub 链接中指定的 Read.me 文件中找到更多详细信息。

结论

如果要在字符串中包含变量值而不使用+ 和双引号来进行繁琐的字符串连接,则最好的选择是使用带有反引号的功能模板文字。如果我们仅需要出于记录目的而在输出字符串中插入值,JavaScript 的 console.log() 函数就很有用。它具有默认情况下包括的格式设置选项。sprintf.js 库具有丰富的功能,并在空间中起着主导作用,因为它在嵌入变量值时比模板文字提供了更多的功能。但这是以熟悉该库为代价的。

相关文章 - JavaScript String