ES6 模板字符串


为了能够让我们更加方便的拼接,操作字符串,ES6出了模板字符串。


模板字符串是用`反引号代替常规字符串的'单引号或者"双引号,从而让字符串拥有可以将一部分替换成变量拼接在一起能力,当然,模板字符串不仅仅如此。

基本语法###

先看一个简单的例子

let text = `hello`;
console.log(message);               // "Hello"
console.log(typeof message);        // "string"
console.log(message.length);        // 5

通过上述例子,可以看出,其实模板字符串创建的就是普通的字符串,没有什么特别的地方。当然,如果想创建多行的字符串,以前的方法可能是这样:

var text = "hello\nworld";
console.log(text);              //hello
                                //world

而如果使用模板字符串,就可以直接换行写,或者用\n

var text =`hello\nworld`;
var text1 =`hello
world`;
console.log(text);              //hello
                                //world
console.log(text1);             //hello
                                //world

使用模板字符串还有值得注意的几点:

  1. 空格符(空白符)也会占位置:
var text=`hello
                world`;
console.log(text);           //hello
                                //                world
console.log(text.length)     //27
  1. 如果想让\n输出,可以使用转义字符,变为\\\n,或者直接使用String.raw:
var text =String.raw`hello\nworld`;
var text1 =`hello\\nworld`;
console.log(text);              //hello\nworld 
console.log(text1);              //hello\nworld 

进入正题###

之前说介绍的功能只能说是普通字符串的改良版,下面介绍真正的模板字符串强大的地方,可以嵌入变量而且写法超级简单,具体代码如下:

let myName = "moonburn";
let message = `hello,my name is ${myName}`;
console.log(message)           //"hello,my name is moonburn"

当然,模板字符串接受的不仅仅是变量,还可以是函数回调,简单的计算,比如:

let jiao= 0.1,
     message = `${jiao}角等于${jiao*10}分,也等于${(jiao* 0.1).toFixed(3)}元。`
console.log(message)           //"0.1角等于1分,也等于0.010元。"

甚至是模板字符串本身:

let myName = "moonburn";
let message = `hello,${`my name is ${myName}`}`;
console.log(message)           //"hello,my name is moonburn"

不仅如此,ES6还贴心的出了模板标签(Tagged Templates)。

模板标签###

声明一个模板标签:

let text = sayHello`hello`;
function sayHello(){
    //do something
}

正如你所看到的,sayHello就是模板标签,那么这个到底是干什么的呢?
可以看到,下面,我们声明的一个和模板标签同名的函数,这个函数就是模板标签的本体!具体有什么用呢?看下面这个例子:

let text = sayHello`hello`;
function sayHello(array1,...array2){
   console.log(array1);     //["hello"]
   console.log(array2);     //undefined
   return 123;
}
console.log(text)    //123

是不是有点明白了?嗯,那我们继续深一步探讨,其实这个模板标签也就是sayHello把模板字符串hello当做参数(两个参数具体怎么分配,我们下面在探讨),然后经过一系列的计算,最后返回一个字符串return 123,给text,所以最后text的值是123
下面我们再看一个复杂一点的例子:

let word= "world"
let name = "moonburn"
let text = sayHello`hello ${word},my name is ${name}`;
function sayHello(array1,...array2){
   console.log(array1);     //["hello ",",my name is ",""]
   console.log(array2);     //["world", "moonburn"]
   return 123;
}
console.log(text)    //123

通过这个例子,我们可以明白,函数的第一个参数,就是模板字符串中非变量的部分组成的数组,值得注意的是,模板字符串的最开始和最后一定要是普通字符串,如果是变量开始或者结尾,就像上述例子,那么就会有空字符串也就是""出现,通过这一点,我们就可以保证,第一个参数的长度永远比第二个参数长一个单位,也就是说array1.length === array2.length+1恒为true。第二个参数是什么呢?显而易见了,就是变量。那么我们来看看默认的模板标签是怎么样的呢?

let word= "world"
let name = "moonburn"
let text = sayHello`hello ${word},my name is ${name}`;
function sayHello(array1,...array2){
    let result = "";
    for (let i = 0; i < array2.length; i++) {
        result += array1[i];
        result += array2[i];
    }
    //加上最后一个普通字符串。
    result += array1[array1.length - 1];
    return result;
}
console.log(text)    //"hello world,my name is moonburn"

当然,array2的值不仅仅只是字符串,如果是需要计算的数,或者回调函数,那么计算完毕之后再进行模板标签的函数调用。

let word= "world"
let name = function(){
    console.log("函数调用")
    return "moonburn"
}
let text = sayHello`hello ${word},my name is ${name()}`;
function sayHello(array1,...array2){
    let result = "";
    for (let i = 0; i < array2.length; i++) {
        result += array1[i];
        result += array2[i];
    }
    //加上最后一个普通字符串。
    result += array1[array1.length - 1];
    return result;
}
console.log(text)  
 //函数调用
 //"hello world,my name is moonburn"

总结###

  • 不带变量的模板字符串就是普通字符串的加强版,换行之类的操作更加方便,注意空格。
  • 带变量的模板字符串可以接受变量计算,函数回调等,最后输出的还是字符串。
  • 模板标签可以自己人性化配置模板字符串,接受2个参数,返回值也是自己定义。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,884评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,212评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,351评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,412评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,438评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,127评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,714评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,636评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,173评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,264评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,402评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,073评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,763评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,253评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,382评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,749评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,403评论 2 358

推荐阅读更多精彩内容