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

本文实例讲述了ES6字符串模板，剩余参数，默认参数功能与用法。分享给大家供大家参考，具体如下：

这里介绍一下字符串模板以及剩余参数，默认参数的概念以及使用。
先来说说字符串模板。

字符串模板

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

可以看出来，字符串模板其实就是将JavaScript中常用的字符串拼接变得更加简单了一些。但是其实它还有一些不易让人察觉的作用：

1. 模板中可以继续套入一个模板；

2. 如果一个变量不是字符串，通过字符串模板它会变成字符串，就好像调用了.toString()方法一样；

但是同样的，有一些事情它也做不了：

1. 它不能自动转义，所以为了防止CORS攻击，我们还是要小心处理一些敏感数据；

2. 它不是用来取代其他js模板的，因为它没有关于循环的相关语法，而这些是其他js模板擅长的。

下图是字符串模板的使用示例：

可以看到字符串模板中还可以解析函数，并且可以带参数。

剩余参数

接下来说说剩余参数，很多语言早就实现了剩余参数了。剩余参数说来了就是用来取代arguments的。

大家应该知道arguments吧，作为javascript函数中的默认属性，arguments代表了所有的参数。

arguments功能虽然强大，但是容易让人疏忽从而造成不必要的错误。我们举一个例子，我们先一个简单的验证函数containsAll ，其作用是检测第一个参数中是否包含后面几个参数。

比如：

containsAll("banana", "b", "nan") //会返回 true,
containsAll("banana", "c", "nan") //会返回 false。

实现代码如下：

function containsAll(haystack) {
 for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

可以看到我们用到了arguments对象，但是它的下标我们是从1开始的，如果从0开始就会选中haystack了，所以不能选择0，而这里就最容易出错。

那么我们看看用ES6的剩余参数如何来实现这个方法：

function containsAll(haystack, ...needles) {
 for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

可以看到剩余参数…的特定语法。也就是说，所有第2到第n个参数现在可以直接放到…后面的数组中去了。

…的用法可不仅仅局限于函数的参数噢，还可以用来简化：

var a = [2,3,4];
var b = [ 1, ...a, 5 ];
console.log( b );// [1,2,3,4,5]

默认参数

再来谈谈默认参数，默认参数也早就被很多语言所实现，其实是一个很基本的功能：

function animalSentence(animals2="tigers", animals3="bears") {
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

不同的参数会返回不同的结果：

animalSentence()//"Lions and tigers and bears! Oh my!"；
animalSentence("elephants") //"Lions and elephants and bears! Oh my!"
animalSentence("elephants", "whales")//"Lions and elephants and whales! Oh my!".

但是javascript的默认参数功能可不只这么简单，它还可以进行简短的表达式：

function animalSentenceFancy(animals2="tigers",animals3=(animals2 == "bears") ? "sealions" : "bears")
{
 return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

希望本文所述对大家ECMAScript程序设计有所帮助。

赞 (0)

相关推荐

  • 浅谈ES6 模板字符串的具体使用方法

    写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了.虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心.在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 . 关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习.欢迎大家积极纠错,留言探讨. 模板字符串(template strings) 用法 // 普通字符串 `In Jav

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

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

  • 深入浅出es6模板字符串

    深入浅出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学习教程之模板字符串详解

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

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

    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新特性之函数默认参数和箭头函数

    深入浅出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函数分割字符串功能及用法示例

    本文实例讲述了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;//取地址符,传

随机推荐