首页 > 新闻 > JavaScript 插值:发现它是什么以及如何在代码中使用它

JavaScript 插值:发现它是什么以及如何在代码中使用它

2023-01-10 小编

在任何编程语言中,字符串都是您会发现自己经常使用的东西,尽管它们可能很简单。有一些方法可以向字符串添加更多功能;在 JavaScript 中也是如此。

一位年轻女性意识到 JavaScript 插值可以帮助增强她为软件开发编写的代码。

在这篇文章中,您将了解什么是插值以及如何将其与字符串一起使用以提高字符串的功能。您还将了解字符串插值如何增强您的编程代码。最后,为了将这里的信息带回家,您将看到一些如何使用 JavaScript 字符串执行插值的代码示例。

让我们开始吧。

立即下载:Java & JavaScript 简介

什么是 JavaScript 插值?

在 JavaScript 中,插值是出于各种目的将字符串或值插入现有字符串的过程。此功能非常有用,因为它使您能够为软件创建强大的动态字符串。这个过程可能听起来很复杂,但恰恰相反,ES6 语法通过模板文字进行了简化。让我们看一下下面视频中的插值示例。

让我们看看将变量嵌入到字符串中并将值显示为字符串的一部分是什么样子的。

let str = "I am a value in a variable";let newStr = `This string contains a variable that is interpolated into the template literal: ${str}.`;console.log(newStr);	

上面的代码将使用模板文字及其上方的变量将上面创建的字符串打印到控制台;此代码的输出如下所示。

"This string contains a variable that is interpolated into the template literal: I am a value in a variable."	

在引入模板文本之前,将值嵌入字符串更加困难,并且还存在局限性。请考虑以下代码。

let str = "I am value in a variable";let newStr = 'This string contains a variable that is interpolated into the template literal: '+ str;console.log(newStr);	

此示例将产生与上述代码相同的输出。

"This string contains a variable that is interpolated into the template literal: I am a value in a variable."	

但是,不能使用此语法创建执行动态表达式的字符串。要创建可以实现这些类型任务的字符串,您需要使用 JavaScript 提供的模板文本。

使用模板文本的插值允许开发人员将表达式嵌入到字符串中,从而有助于创建可在字符串中执行动态表达式的字符串。

let str = `This string evaluates a mathematic equation using a template literal and interpolation 20 + 3: ${20 + 3}.`	

上面的代码同时使用两个基本概念来创建鲁棒插值。首先要考虑的是使用反引号来声明字符串,这决定了此字符串是模板文本。第二种是使用用大括号包裹的数学方程,前面有一个美元符号。

${20 + 3}	

上面的代码是用于将值或表达式插入字符串的语法;使用此语法,您几乎可以将任何内容嵌入到字符串中。

您还可以动态添加变量而不是静态值,从而进一步扩展插值的实用性。

let val1 = 10;let val2 = 13;let str = `This string evaluates a mathematic equation using a template literal and interpolation ${val1} + ${val2} = ${val1 + val2}.`;console.log(str);	

上面的代码创建了一个非常强大的字符串,该字符串可以提供一种动态的方式来执行公式并向用户提供有关它的消息。上面代码的输出可以在下面看到。

"This string evaluates a mathematic equation using a template literal and interpolation 10 + 13 = 23."	

字符串插值可以成为软件开发过程的强大工具,并提供动态方法来为用户创建消息。但这并不是您可以使用它们的唯一方法。您还可以使用它们为开发人员开发有价值的消息。

推进 JavaScript 插值

这篇文章教了你开始推进插值和模板文字所需的一切。推进 JavaScript 插值的一种方法是确定它在开发过程中有帮助的不同方式。例如,创建用于测试和调试的动态且信息丰富的字符串,这有助于公开代码中错误和 bug 的原因。这些并不是字符串插值可以帮助改进软件开发过程的唯一方法。


*必填

您好,访客!有什么新鲜事想告诉大家?

点击按钮快速添加回复内容: 高兴 支持 激动 给力 加油 生气 路过 威武
发表
暂时还没评论,等你发挥!