js中的模板字符串是什么_Vue比较字符串

js中的模板字符串是什么_Vue比较字符串今天为大家说说ES6中的新特性-模板字符串,它为JavaScript提供了简单的字符串插值功能,从此以后,你可以通过一种更加美观、更加方便的方式向字符串中插值了。 描述:模板字符串是通过反引号(“)来创建字符串的,跟以往的单引号('')和双引号("")的创建方法

今天为大家说说ES6中的新特性-模板字符串,它为JavaScript提供了简单的字符串插值功能,从此以后,你可以通过一种更加美观、更加方便的方式向字符串中插值了。

描述:模板字符串是通过反引号(“)来创建字符串的,跟以往的单引号(”)和双引号(“”)的创建方法是一样的。

const message = 'Hello, World!'; //单引号
const message = "Hello, World"; //双引号
const message = `Hello, World!`; //反引号

还有不同于其他两种功能的是,模板字符串中所有的空格、新行、缩进,都会原样输出在生成的字符串中。这样我们在用字符串创建dom模板的时候,就方便的多了。

const div = `
        <div class="hello">
            <p>模板字符串</p>
        </div>
    `;

js中的模板字符串是什么_Vue比较字符串

 

 功能:模板字符串支持占位符(${expression})。占位符内的表达式在运行时进行计算,并将结果插入到字符串中。

其中占位符内的表达式可以包含以下三种内容:

1.变量

const myVal = 'abc';
const message = `${myVal}`;

上面的JS被执行过程中,占位符${myVal}被替换成myVal里面的值,所以后面的message输出的内容也就是abc了。

2.表达式

const n1 = 1;
const n2 = 2;
const message = `n1 + n2 = ${n1 + n2}, n1比n2大?,${n1 > n2 ? '是的' : '不是'}`;

3.函数

const a1 = 1;
function sum(a, b) {
    return a + b;
}
const result = `计算两个数的相加: ${sum(a1, 2)}`; 
//=> 计算两个数的相加:3;

下面来说说它内置的一些功能。

一、数据类型的隐式转换

占位符表达式结果都会被隐式转换为字符串输出。

例如number类型:

const n = 3.5;
const message = `The number is ${n}`;
message; // => `The number is 3.5`

数组类型:

const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

如果占位符包含一个对象,按照转换为字符串的规则,该对象也被转换为字符串。调用对象方法toString()来获取对象的字符串表示。

数组转换的原理是:数组方法join(‘,’)在数组转换为字符串时执行因此字符串插值结果为'The numbers are 1,2,3'

二、转义占位符

因为占位符格式${expression}在模板文字中具有特殊含义,所以不能在`${someCharacters}`不转义的情况下使用字符序列

也就是里面引用的内容必须是已经声明了的。

const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

如果想把‘${abc}‘当做字符串输出,可以使用转义符(反斜杠\)。

const message = `Some weird characters: \${abc}`;
message; // => 'Some weird characters follow: ${abc}'

也就是说如果你需要在模板字符串中引入字符$和{。无论你要实现什么样的目标,你都需要用反斜杠转义每一个字符:`\$`和`\{`。

const message = `Some weird characters: \${abc} \${abc \${`;

message; // => 'Some weird characters: ${abc} ${abc ${'

最后想说的是,字符串插值是一个很棒的功能,因为它有助于以简洁易读的方式将值插入字符串文字中。并避免笨拙的字符串连接方法。

 

今天的文章js中的模板字符串是什么_Vue比较字符串分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/46338.html

(0)
编程小号编程小号
上一篇 2023-09-05 23:06
下一篇 2023-09-05

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注