您的位置:首页> 前端教程> ES6教程
文章导航

JavaScript 模板字面量

2019-2-23 16:54| 作者: admin| 查看: 810| 评论: 0|来自: 蚂蚁部落

JavaScript的字符串功能与其他编程语言相比要孱弱很多。

比如ES5并不具有多行字符串或者字符串格式化等功能,ES2015通过模板字面对其进行了加强。

特别说明:模板字面量在早期的ES2015版本被称作模板字符串,这一点注意下。

一.ES5字符串:

在此版本中,可以通过双引号或者单引号创建字符串,不能实现字符串换行或者格式化等操作。

字符串的拼接等操作稍显繁琐,看如下代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
var webName="蚂蚁部落";
var age=5;
var str="网站名称是"+webName+",已经"+age+"岁了";
console.log(str);

上面代码通过双引号创建字符串,并且进行了字符串拼接操作。

通过+运算符实现字符串拼接操作,如果代码复杂,那么将非常繁琐。

二.模板字面量概念:

模板字面量是ES2015新增,通过反引号定义,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let web=`本站url地址是www.softwhy.com`;
let webName=`蚂蚁部落\``;
console.log(web);
console.log(webName);

上述代码定义一个模板字面量,将将其打印出来,如果想要在打印出反引号,则需要使用转义字符。

此时和普通字符串表现无异,前面已经提到过,模板字面是原有普通字符串的加强,新增很多强力功能。

后面会分步通过代码实例对模板字符串的主要功能进行详细介绍,希望能够给需要的朋友带来帮助。

三.多行字符串:

ES5实现多行字符串稍微麻烦一些,必须通过换行符\n,看如下代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let web="本站url地址是\nwww.softwhy.com";
console.log(web);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/23/165537dhlpfcthsfxacbth.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过在字符串中插入换行符实现了字符串的换行效果,使用模板字面量一切都很轻松。

上述代码修改如下:

[JavaScript] 纯文本查看 复制代码运行代码
let web=`本站url地址是
  www.softwhy.com`;
console.log(web);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/23/165613dsizoqsn8ok5quux.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

使用反引号创建一个模板字面量,直接在代码中换行即可实现字符串的换行操作。

还需要注意的是,模板字面量中的所有空格都会被算作最终字符串的一部分。

关于多行字符串的更多内容可以参阅JavaScript 多行字符串一章节。

四.${}占位符:

可以直接在模板字面量中插入占位符${}。

占位符就如同一个普通字符串一样,可以插入到字符串中的任意位置。

大括号中可以是任何合法的表达式,并返回此表达式的值,通过占位符可以实现灵活的拼接操作。

将前面用到过的代码实例修改如下:

[JavaScript] 纯文本查看 复制代码运行代码
let webName="蚂蚁部落";
let age=5;
let str=`网站名称是${webName},已经${age}岁了`;
console.log(str);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/23/233724v9g18a58w599ngb9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码实现了轻松的字符串拼接操作,远比使用+更为简单人性。

大括号中可以是任意合法表达式,所以大括号中的内容可以更为复杂一些。

对占位符本文不做更多介绍,关于此概念更多内容参阅JavaScript ${} 占位符一章节。

五.模板字面量其他内容:

除了前面介绍的关于模板字面量的内容之外,还有几个很重要的概念需要介绍。

但是考虑到文章的篇幅文本,后面不再做介绍,可以参阅下面给出的相关内容的文章链接:

(1).关于模板标签可以参阅JavaScript 模板标签一章节。

(2).String.raw方法可以参阅JavaScript String.raw()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部