在其他语言存在字符串内插(string interpolation)或者叫变量内插(Variable interpolation).ES6中的称为template string。

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

默认模板字符串

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

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

多行字符串

  1. 可以使用模板字符串产生多行字符串:
  2. var s = `a
  3. b
  4. c`;
  5. assert(s === 'a\n b\n c');
  6. 所有的字符包括空白符都会被包含在最后的字符串内.

带标签的模板字符串

如果一个模板字符是由一个表达式开头的,则该模板字符串被称为带标签的模板字符串(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属性来获取到一个模板字符串的原始字符串形式.

  1. function r(strings, ...values) {
  2. assert(strings.raw[0] === '\\n');
  3. }
  4. r `\n`
  5. ES6提供了一个新的函数String.raw,该函数返回的就是原生字符串.
  6. String.raw `a\n${ 42 }b` // "a\\n42b"

javascript的字符串模板的更多相关文章

  1. JavaScript——字符串——模板字符串

    JavaScript--字符串--模板字符串 字符串可以用反引号包裹起来,其中的${expression}表示特殊的含义,JavaScript会将expression代表的变量的值和反引号中的其它普通 ...

  2. 代码片段 - JavaScript 字符串模板

    /* ------------------------------ // 字符串模板1,语法严格,不能混用,效率相对较高 // 使用 {{ }} 作为标记是为了允许在模板中使用 JSON 字符串 // ...

  3. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  4. 【JavaScript】字符串处理函数集合

    var $string = {}, toString, template, parseURL, buildURL, mapQuery, test, contains, trim, clean, cam ...

  5. ES6中字符串模板的使用

    反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...

  6. es6 入坑笔记(一)---let,const,解构,字符串模板

    let  全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i < ...

  7. ES6, Angular,React和ABAP中的String Template(字符串模板)

    String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性.本文将Jerry工作中使用到的String Template的特性做一个总结. ES6 阮一峰老师有一个专 ...

  8. JavaScript String 字符串方法

    JavaScript String 字符串方法汇总   1.str.indexOf() 方法查找字符串中的字符串  返回   字符串中指定文本首次出现的索引(位置)       JavaScript ...

  9. ES6入门四:对象字面量扩展与字符串模板字面量

    简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...

随机推荐

  1. Eclipse添加注释简介

    (1)在方法或者属性上面添加注释:在方法或者属性字段的上面一行输/**,然后回车.一般情况下添加的注释格式如下所示,当然注释的格式是可以修改的:   1 2 3 4 5 /**   * @param ...

  2. ZooKeeper学习第七期--ZooKeeper一致性原理

    一.ZooKeeper 的实现 1.1 ZooKeeper处理单点故障 我们知道可以通过ZooKeeper对分布式系统进行Master选举,来解决分布式系统的单点故障,如图所示. 图 1.1 ZooK ...

  3. iOS中几种定时器

    在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. iOS中定时器NSTimer的使用   1.初始化 + (NSTimer ...

  4. 【Lucene实验1】构建索引

    一.实验名称:构建索引 二.实验日期:2013/9/21 三.实验目的: 1)        能理解Lucene中的Document-Field结构的数据建模过程: 2)        能编针对特定数 ...

  5. 自己编写redis客户端[deerlet-redis-client],分享与招募。

    引言 最近工作上有需要使用redis,于是便心血来潮打算自己写一个Java客户端.经过两天的努力,目前该客户端已经基本成型.不过可惜的是,由于redis的命令众多,因此LZ还需要慢慢扩展它去支持更多的 ...

  6. linux查看cpu、内存、版本信息

    1.  查看物理CPU的个数#cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc –l 2.   查看逻辑CPU的个数#cat ...

  7. 四则运算 Day3

    总结篇 一开始看到自己的成绩是接近及格线的时候,我的内心是崩溃的,就差辣么一点点..但是感谢老师给了这么一个补交作业的机会.在参考博客园相关四则运算题目后,做了一个适用小学一二年级使用的简单的四则运算 ...

  8. AtomicInteger源码分析

    问题背景 最近在看LinkedBlockingQueue看到了其中的count使用AtomicInteger修饰,之前也看过AtomicInteger的一些解释,也是似懂非懂的,今天深入的了解了其实现 ...

  9. 用SQL打印乘法口诀表

    --用SQL打印出乘法口诀表 declare @i int ,@j int --@i是乘法口诀的行数 --一共九行 begin --每次都是从1*开始,j每循环一次递增 )--print每次输出都会换 ...

  10. 字符串转json

    function str2json(str) { var arr = str.split('.'), json = {}, _this = json; if (!json[arr[0]]) json[ ...