1. 首页
  2. IT资讯

「ES6基础」模板字符串(Template String)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F3e6bed08d1394aae9a23c86145dec109″ img_width=”900″ img_height=”383″ alt=”「ES6基础」模板字符串(Template String)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号(backticks,`),而不是单引号或双引号。以下是个简单的示例:u003Cu002Fpu003Eu003Cpreu003Elet str1 = `hello!!!`; u002Fu002Ftemplate stringu003Cbru003Elet str2 = “hello!!!”;u003Cbru003Econsole.log(str1 === str2); u002Fu002Foutput “true”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E今天的文章将从以下几个方面进行介绍:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E表达式u003Cu002Fliu003Eu003Cliu003E多行字符串u003Cu002Fliu003Eu003Cliu003E标签模板字符串(Tagged template literals)u003Cu002Fliu003Eu003Cliu003E原始字符串(Raw strings)u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E本篇文章阅读时间预计3分钟u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E表达式u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E模板字符串的出现,给ES6添加了“表达式”的概念。在ES6之前,我们只能用加号连接变量表达式,代码如下:u003Cu002Fpu003Eu003Cpreu003Evar a = 20;u003Cbru003Evar b = 10;u003Cbru003Evar c = “JavaScript”;u003Cbru003Evar str = “My age is ” + (a + b) + ” and I love ” + c;u003Cbru003Econsole.log(str);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E自从模板字符串表达式的出现后,我们嵌入表达式的方式更加简单,即${变量表达式},变量表达式就相当函数一样,变量传值进行替换。如果我们要使用自定义的函数处理字符串,我们可以使用标签模板字符串(Tagged template literals),标签函数进行处理(a tag function)。下一小节将会讲到。先让我们看下如何使用模板字符串嵌入表达式,代码如下:u003Cu002Fpu003Eu003Cpreu003Econst a = 20;u003Cbru003Econst b = 10;u003Cbru003Econst c = “JavaScript”;u003Cbru003Econst str = `My age is ${a+b} and I love ${c}`;u003Cbru003Econsole.log(str);u003Cbru003Eu002Fu002Foutput “My age is 30 and I love JavaScript”u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003E标签模板字符串u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E首先我们先创建一个标记的模板字符串,使用函数处理模板字符串,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Econst tag = function(strings, aPLUSb, aSTARb) {u003Cbru003E u002Fu002F strings is: [ ‘a+b equals ‘, ‘ and a*b equals ‘, ” ]u003Cbru003E u002Fu002F aPLUSb is: 30u003Cbru003E u002Fu002F aSTARb is: 200u003Cbru003E return ‘SURPRISE!’;u003Cbru003E};u003Cbru003Econst a = 20;u003Cbru003Econst b = 10;u003Cbru003Elet str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;u003Cbru003Econsole.log(str);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E编译器是如何处理这段代码的?第一个参数strings包含所有的静态字符串,以表达式变量进行分割成数组(类似split(‘$’)的效果);然后逐一解析变量表达式,传到对应的参数aPLUSb和aSTARb。u003Cu002Fpu003Eu003Cpu003E如果我们想修改aPLUSb, aSTARb的值,我们可以在函数内部进行修改:u003Cu002Fpu003Eu003Cpreu003Econst tag = function(strings, aPLUSb, aSTARb) {u003Cbru003E u002Fu002F strings is: [‘a+b equals’, ‘and a*b equals’]u003Cbru003E u002Fu002F aPLUSb is: 30u003Cbru003E u002Fu002F aSTARb is: 200u003Cbru003E aPLUSb = 200;u003Cbru003E aSTARb = 30;u003Cbru003E return `a+b equals ${aPLUSb} and a*b equals ${aSTARb}`;u003Cbru003E};u003Cbru003Econst a = 20;u003Cbru003Econst b = 10;u003Cbru003Elet str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;u003Cbru003Econsole.log(str);u003Cbru003Eu002Fu002Foutput “a+b equals 200 and a*b equals 30”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E使用此方法我们可以创建灵活度更高的模板字符串,接收后台数据渲染我们前端的界面。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E多行字符串u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003EEs6的模板字符串给我们提供了一种创建多行文本字符串的新方法。在ES6之前我们只能使用”\n“在字符串中进行换行,代码如下:u003Cu002Fpu003Eu003Cpreu003Econsole.log(“1\n2\n3”);u003Cbru003Eu002Fu002Foutputu003Cbru003Eu002Fu002F1u003Cbru003Eu002Fu002F2u003Cbru003Eu002Fu002F3u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在es6中,我们可以直接输入回车进行换行,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Econsole.log(`1u003Cbru003E2u003Cbru003E3`);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E模板字符串的方法会在每一行的最后添加”\n”进行换行。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E原始字符串(Raw strings)u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E原始字符串是一个普通字符串,其中不会解释转义字符。我们可以使用模板字符串创建原始字符串。我们可以使用String.raw来获取原始字符串,代码如下:u003Cu002Fpu003Eu003Cpreu003Elet s = String.raw `xy\n${ 1 + 1 }z`;u003Cbru003Econsole.log(s); u003Cbru003Eu002Fu002Foutput “xy\n2z”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这里的\n不被解释成换行符。相反,它是一个由两个字符组成的原始字符串,及“\”和“\n”,变量S的长度为6。如果我们使用自定义的标签函数处理模板字符串,我们可以使用String.raw方法来获取,代码如下:u003Cu002Fpu003Eu003Cpreu003Elet tag = function(strings, …values) {u003Cbru003E return strings.raw[0]u003Cbru003E};u003Cbru003Elet str = tag `Hello \n World!!!`;u003Cbru003Econsole.log(str);”u003Cbru003Eu002Fu002Foutput “Hello \n World!!!”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E但是也有例外(进行转义):u003Cu002Fpu003Eu003Culu003Eu003Cliu003E任何以\\u开头的内容都将被视为Unicode转义u003Cu002Fliu003Eu003Cliu003E以\\x开头的任何内容都将被视为十六进制转义u003Cu002Fliu003Eu003Cliu003E任何以\开头然后跟着一个数字将被视为八进制转义u003Cu002Fliu003Eu003Cu002Fulu003Eu003Ch1u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E今天的内容就介绍到这里,模板字符串让我们处理字符串更加容易,尤其是我们在渲染前端界面展示数据时,大大减少了代码量,加强了易读性。u003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6713733594054918663u002F?group_id=6713733594054918663″ target=”_blank”u003E「ES6基础」let和作用域u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714091462650233352u002F?group_id=6714091462650233352″ target=”_blank”u003E「ES6基础」const简介u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714508610916844035u002F?group_id=6714508610916844035″ target=”_blank”u003E「ES6基础」默认参数值u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712258013375234568u002F?group_id=6712258013375234568″ target=”_blank”u003E「ES6基础」箭头函数(Arrow functions)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712646837519532551u002F?group_id=6712646837519532551″ target=”_blank”u003E「ES6基础」迭代器(iterator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712984431553937934u002F?group_id=6712984431553937934″ target=”_blank”u003E「ES6基础」生成器(Generator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注u003Cstrongu003E“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「ES6基础」模板字符串(Template String)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10752.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code