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

模板字符串(template strings)

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲,就是增加了变量功能的字符串。

ES6为我们提供了模板字符串,语法使用反引号`。模板字符串具有以下三个优点:

  • 多行文本
  • 字符串中插入变量
  • 字符串中插入表达式

基本语法

模板字符串和 ES5的字符串的声明一样。

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

多行文本

在Jquery 盛行的年代,我们经常会拼接 html 片段再进行节点替换。写一段 ES5的代码大家体会一下:

var str = '<html>'
+ '<div>啦拉拉</div>'
+ '<div>xixixi</div>'
+ '</html>';
console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>

ES6支持多行文本,上面的代码实现起来就容易多了。

let str4ES6 = `<html>
 <div>啦拉拉</div>
 <div>xixixix</div>
</html>`;

console.log(str4ES6);

可以插入变量或表达式

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6的模板字符串实现起来就容易好多。关键语法${},其中可以插入任何的 js 表达式。

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

总结

ES6模板字符串就是这么的简单这么的好用。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-10-08

ES6(ECMAScript 6)新特性之模板字符串用法分析

本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

深入浅出es6模板字符串

本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下 作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面.举个栗子 $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 有时候还要给标签加一些属性,写起来很不方便,

详解JavaScript ES6中的模板字符串

在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

ES6字符串模板,剩余参数,默认参数功能与用法示例

本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法.分享给大家供大家参考,具体如下: 这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用. 先来说说字符串模板. 字符串模板 ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}.如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生. //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.l

在ES5与ES6环境下处理函数默认参数的实现方法

函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮) MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参. ES5 使用逻辑或||来实现 众所周知,在ES5版本中,并没有提供的直接方法供我们我们处理函数默认值 所以只能够自己去增强函数的功能,一般会这么来做: function doSomething (name, age) { name = name || 'default name' age = age || 18 console.log(name

深入浅出ES6新特性之函数默认参数和箭头函数

1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值: 这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 => 符号来定义. 箭头函数相当于匿名函数,所以采用函数表达式的写法

ES6新特性之解构、参数、模块和记号用法示例

本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对

ES6新数据结构Map功能与用法示例

本文实例讲述了ES6新数据结构Map功能与用法.分享给大家供大家参考,具体如下: 新数据结构Map JavaScript中对象的本质是键值对的集合,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map.Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇).请看下面例子. var m = new Map(); var ul = document.getElementsByTagName('ul'); m.set(ul,'hi'); co

SQL Server实现split函数分割字符串功能及用法示例

本文实例讲述了SQL Server实现split函数分割字符串功能及用法.分享给大家供大家参考,具体如下: /* 函数名称:f_SplitToNvarchar 作用:实现split功能的函数 更新记录: 设计思路:将nvarchar类型字符结合的一个串,分隔到一张只有一列nvarchar类型的表里 */ CREATE FUNCTION [dbo].[f_SplitToNvarchar] ( @SourceSql NVARCHAR(MAX),--源分隔字符串 @StrSeprate VARCHAR

php数组指针函数功能及用法示例

本文实例讲述了php数组指针函数功能及用法.分享给大家供大家参考,具体如下: 数组指针函数有reset(),prev(),current(),next(),end(),key(),each() 其中reset(),prev(),current(),next(),end(),都是只与数组的值有关的函数,key()只与数组键,有关的函数,each()可以获得数组的值和键 reset()函数,参数是一个数组,引用传值,将一个数组的内部指针重置到首位,也就是数组的第一个元素所在的位置,然后返回第一个元素

Python常用字符串替换函数strip、replace及sub用法示例

本文实例讲述了Python常用字符串替换函数strip.replace及sub用法.分享给大家供大家参考,具体如下: 今天在做一道今年秋季招聘题目的时候遇上了一个替换的问题,题目看起来好长好复杂啊,真的,一时间,我看了好几遍也没看懂,其实实质很简单,就是需要把给定的一个字符串里面的指定字符替换成一些指定的内容就行了,这样首选当然是字典了,没有之一,题目很简单就不写出来了,在这里花了一点时间专门总结了一下字符串的替换的几个常用的函数,希望也能帮到有需要的人,自己也是当做一个学习的记录,好了,在这里

Python enumerate函数功能与用法示例

本文实例讲述了Python enumerate函数功能与用法.分享给大家供大家参考,具体如下: eunmerate在英文中是列举.枚举的意思,在python中eunmerate()是一个内置的函数,用于在一个可迭代或可遍历的对象(如列表.字符串.数组.字典)中,将对象组成一个一个序列和索引,可以同时获得索引和索引值. enumerate函数原型: enumerate(sequence, [start=0]) 功能:将可循环序列sequence以start开始分别列出序列数据和数据下标: 即对一个

PHP中引用类型和值类型功能与用法示例

本文实例讲述了PHP中引用类型和值类型功能与用法.分享给大家供大家参考,具体如下: PHP中的四种简单类型和复杂类型array都是值类型.同类型间赋值传递的是值,即创建一个副本给新变量. 例如: $int1 = 123; $int2 = $int1;//直接传递的是值,只是做了一个叫int1的副本叫int2 $int2 = 456; echo $int1;//输出 123 echo $int1 === $int2;//为假 $int1 = 123; $int2 = &$int1;//取地址符,传