原文:http://tc39wiki.calculist.org/es6/template-strings/


ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字符串字面量(string literal).这种操作在其他语言(比如shell->perl->php等)中通常称之为字符串内插(string interpolation)或者叫变量内插(Variable interpolation).模板字符串在早期的Harmony提案中称之为半字面量(Quasi Litaral),现已更名为模板字符串.

模板字符串使用反引号(backtick或者叫backquote)来代替普通字符串中的双引号(double quote)或单引号(single quote).模板字符串可以包含有占位符(placeholder),占位符使用${ }这样的语法.占位符中表达式的值以及占位符两边的文本会一起传递给一个标签函数(Tag function).这个函数是由模板字符串开头(左边的反引号之前)的一个可选的表达式决定的.如果模板字符串开头没有任何表达式,则会使用默认的标签函数.

默认模板字符串

如果不指定标签函数,则会使用默认的标签函数,该函数的行为是将模板字符串的每个部分按顺序连接成一个字符串并返回.

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}`  // "1 + 2 = 3"

多行字符串

可以使用模板字符串产生多行字符串:

var s = `abc`;
assert(s === 'a\n    b\n    c');

所有的字符包括空白符都会被包含在最后的字符串内.

译者注:相当于python中的三引号:

>>> """a
... b
... c"""
'a\nb\nc'

带标签的模板字符串

如果一个模板字符是由一个表达式开头的,则该模板字符串被称为带标签的模板字符串(tagged template string).开头的这个表达式就是标签函数,解析后的模板字符串会作为参数传入标签函数.

function tag(strings, ...values) {assert(strings[0] === 'a');assert(strings[1] === 'b');assert(values[0] === 0);return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

原始字符串

解析后的模板字符串中还包含了对应字符串的原始形式(未转义之前的字符串).例如,字符串\n的原始形式包含了两个字符\n,而不是单个的换行符.

标签字符串可以通过读取第一个参数的raw属性来获取到一个模板字符串的原始字符串形式.

function r(strings, ...values) {assert(strings.raw[0] === '\\n');
}r `\n`

ES6提供了一个新的函数String.raw,该函数返回的就是原生字符串.

String.raw `a\n${ 42 }b`  // "a\\n42b"

译者注:相当于python中的r:
>>> r'\n'
'\\n'

译者注:目前SpiderMonkey正在实现该特性:https://bugzilla.mozilla.org/show_bug.cgi?id=688857

你可以在这个js shell上体验一下简单的功能:http://js-quasis-libraries-and-repl.googlecode.com/svn/trunk/index.html

ESwiki上和ES6草案上有更详细的参考.

[译]JavaScript:ES6中的模板字符串简介相关推荐

  1. es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串,在 ES6 中引入了一种新的字符 - phpStudy...

    详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...

  2. js模板字符串自定义类名_详解JavaScript ES6中的模板字符串

    这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...

  3. 用ES6中的模板字符串实现在字符串中添加变量和字符串换行

    什么是模板字符串 它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 例如: var str1 = '你好吗' +'李华';var str2 = `你好吗 李华`;conso ...

  4. ES6中的模板字符串---反引号``

    在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...

  5. ES6知识点整理模板字符串和标签模板的应用

    ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = ...

  6. ES6学习(模板字符串)

    模板字符串 传统的JavaScript语言,输出模板通常是这样写的. const name = 'Jack'; const age = 18; const sentence = name + ' is ...

  7. ES6 Template String 模板字符串

    语法 模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 用法 // 普通字符串 `In J ...

  8. ES6新功能-模板字符串

    ES6新功能-模板字符串 VS 传统JS字符串拼接

  9. es6中标签模板实例中的tab函数的理解

    let a = 5; let b = 10; tag`A ${ a + b } B ${ a * b }`; // 等同于 tag(['A', ' B', ''], 15, 50); function ...

最新文章

  1. java 判断当前运行的操作系统
  2. [html] 对于rtl网站的适配有哪些方案?
  3. JAVA多线程及线程状态转换
  4. echarts 中 symbol 自定义图片
  5. asp.net 3.5 知识点
  6. python查找第二次输入字符串在第一次字符串中出现的次数
  7. Compiler and Linker
  8. matlab r2021b校园正版软件安装过程的问题及解决方案记录
  9. linux centos如何切换时区,如何在CentOS服务器上更改时区?
  10. Cocos2d+protobuf仿JJ斗地主源码,win32和Android编译通过
  11. java合并word文档和添加分节符
  12. 前端调用微信小程序的支付流程
  13. c++并发编程(concurrency)----线程管理
  14. 对策论基础---矩阵对策的基本定理
  15. 思科9124光纤交换机配置管理使用手册
  16. Digital Image processing 数字图像处理最佳陷波滤波器设计(频域)
  17. python闰年判断 从儒略历到格里高利历 公历历史
  18. 币安智能链监听日志事件
  19. 蓝牙BLE芯片PHY6222之I2C主从通信
  20. Pr剪辑上分攻略 -- 文字效果

热门文章

  1. FireDAC 中文字段过滤问题
  2. selenium操作浏览器窗口最大化和刷新
  3. Django forms组件
  4. Android存储数据方式
  5. 用程序猿思维、程序设计师思维两种方式写求斐波那契数列的方法。
  6. 关于Hyper-V备份的四大注意事项
  7. 考研数学:【以错补错】 降低做题出错率
  8. (转)千万别熬夜:身体器官晚上工作时间表一览
  9. 未能加载文件或程序集“Microsoft.Office.Interop.Owc11, Version=11.0.0.0, ...”或它的某一个依赖项~[解决方案]...
  10. ASP.NET2.0数据操作之创建业务逻辑层