ES6之模版字符串的具体使用

最近在项目中使用了ES6的模版字符串,在这里加以总结。

1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的:

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all"
    );

但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

于是ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来。上面的例子可以用模版字符串写成下面这样:

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

这样的做法就简洁了很多,我们不需要再使用大量的""和+来拼接字符串和变量。

2. 当然,模版字符串可以引入变量,不使用变量也是可以的。如下所示:

` I am a man.`

` No matter what you do,

I trust you.`  

3. 我们还可以先定义变量,然后在模版字符串中嵌入变量:

var name="zzw";
` ${name},no matter what you do,
 I trust you.` 

4.显然,由于反引号是模版字符串的标识,如果我们需要在字符串中使用反引号,我们就需要对其进行转义,如下所示:

`No matter\` what you do,
I trust you.`

5.注意:如果使用模版字符串表示多行字符串,所有的空格和缩进都会被保存在输出中!!

console.log( `No matter\` what you do,
 I trust you.`); 

输出结果如下:

6. 在${}中的大括号里可以放入任意的JavaScript表达式,还可以进行运算,以及引用对象属性。

var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

结果如下所示:

7.更强大的是:模版字符串还可以调用函数:

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯,${string()}`);

结果如下所示:

另外,如果函数的结果不是字符串,那么,将按照一般的规则转化为字符串:

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯,${string()}`);

结果如下所示:

在这里,实际上数字666被转化成了字符串666.

8.如果在${}中的变量时没有命名的,那么会报错:

console.log(`你想说什么? 嗯,${string()}`);

在上面这句代码中,string()函数没有声明,于是报错:

9.其实,我们还可以在${}中输入一个字符串,知识结果仍旧会返回一个字符串:

console.log(`你想说什么?嗯,${"其实我不是变量~"}`);

结果如下所示:

10.如果希望引用模版字符串本身,可以像下面这样写:

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

结果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript基于replace+正则实现ES6的字符串模版功能

    本文实例讲述了JavaScript基于replace+正则实现ES6的字符串模版功能.分享给大家供大家参考,具体如下: 采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ".十分容易出错. 无法重用.HTML 片段都是离散化的数据,难以对其中重复的部分进行提取. 无法很好地利用 标签.这是 HTML5 中新增的一个标签,标准极力推荐将 HTML

  • ES6之模版字符串的具体使用

    最近在项目中使用了ES6的模版字符串,在这里加以总结. 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result").append( "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" ); 但是我们可以看到:这样的传统做法需要使

  • JS ES6多行字符串与连接字符串的表示方法

    本文实例讲述了JS ES6多行字符串与连接字符串的表示方法.分享给大家供大家参考,具体如下: 1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive"); 新版写法 alert(`你好 我叫 olive`);//注意这里的两个点是键盘上数字键1左边的按键,而不是单引号哦 2. 以前,把多个字符串连接起来,可以用+号连接 var name ="olive

  • 当ES6遇上字符串和正则表达式

    字符串是一种重要的数据类型,而正则表达式则是赋予了编程人员更多操作字符串的能力.ES6的创作者为字符串和正则表达式添加了许多的新功能.下面玲珑将来进行一个全面的总结. 字符串和正则两个部分各两节,全文阅读时间大约10分钟 字符串 1.更好的Unicode支持 Unicode是一个字符集.将全世界所有的字符包含在一个集合里,计算机只要支持这一个字符集,就能显示所有的字符,再也不会有乱码了. 在es6出现之前,js字符串一直基于16位字符编码进行构建.每16位序列是一个编码单元,代表一个字符,Uni

  • ES6基础之字符串和函数的拓展详解

    本文实例讲述了ES6基础之字符串和函数的拓展.分享给大家供大家参考,具体如下: 字符串的拓展 1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串 2.字符串新增的 includes().startsWith().endsWidth() 三个方法用于判断某一字符串是否包含于另一字符串 includes():返回布尔值,表示源字符串中是否包含参数字符串. startsWith():返回布尔值,表示参数字符串是否在源字符串的头部. endsWith():返回布尔值,表示参数

  • ES6新特征数字、数组、字符串

    一.let和const let:声明变量,只在声明的块级作用域(大括号)内起作用[注意:let不向var那样可以自动提升] 如果一个区块内存在let或const命令,该区块就被解析成封闭作用域(暂时性死区,必须先声明再使用) [所以一个区块内只要有let,就可能存在死区,就可能会出现变量声明使用顺序的错误] let为JavaScript增加了块级作用域 ES6中在块级作用域声明的函数不能在外部被引用,但在ES5中可以(ES5中的函数声明可以提升到全局作用域或函数作用域头部,ES6中不行,但是ES

  • ES6学习教程之模板字符串详解

    模板字符串(template strings) ES6 中引进的一种新型的字符串字面量语法 - 模板字符串.书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量.简单来讲,就是增加了变量功能的字符串. ES6为我们提供了模板字符串,语法使用反引号`.模板字符串具有以下三个优点: 多行文本 字符串中插入变量 字符串中插入表达式 基本语法 模板字符串和 ES5的字符串的声明一样. // ES5 var name = 'xixi'; console.log(name);// xixi

  • ES6学习笔记之正则表达式和字符串正则方法分析

    本文实例讲述了ES6正则表达式和字符串正则方法.分享给大家供大家参考,具体如下: RegExp构造函数 在ES5中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new RegExp('xyz', 'i'); // 等价于 var regex = /xyz/i; 第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝. var regex = new RegExp(/xyz/i);

  • es6 字符串String的扩展(实例讲解)

    新特性:模板字符串 传统字符串 let name = "Jacky"; let occupation = "doctor"; //传统字符串拼接 let str = "He is "+ name +",he is a "+ occupation; es6简洁的字符串拼接 let name = "Jacky"; let occupation = "doctor"; //模板字符串拼接 le

  • ES6模板字符串和标签模板的应用实例分析

    本文实例讲述了ES6模板字符串和标签模板的应用.分享给大家供大家参考,具体如下: ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = '<div>' + '<span>'+ hello +'</span>' + '</div>'; console.log(html); // <div><span

  • ES6字符串的扩展实例

    本节我们来学习 ES6 中字符串类型的扩展,包括一些字符串对象的新增方法的使用等. 字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,JavaScript 中可以采用 \\uxxx 形式表示一个字符,其中 xxxx 表示字符的码点.例如: console.log("\u0075"); // u 但是这种表示法只限于码点在 \\u0000~\\uFFFF 之间的字符.超出这个范围的字符,必须用两个双字节的形式表示. console.log("\uD842

随机推荐