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


Posted in Javascript onApril 06, 2017

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

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

字符串模板

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

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

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

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

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

但是同样的,有一些事情它也做不了:

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

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

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

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

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

剩余参数

接下来说说剩余参数,很多语言早就实现了剩余参数了。剩余参数说来了就是用来取代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程序设计有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 #Javascript
javascript中this用法实例详解
Apr 06 #Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 #Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 #Javascript
JS优化与惰性载入函数实例分析
Apr 06 #Javascript
大白话讲解JavaScript的Promise
Apr 06 #Javascript
JS实现的二叉树算法完整实例
Apr 06 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
php源码的使用方法讲解
2019/09/26 PHP
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
PHP面试题及答案一
2012/06/18 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
面料业务员岗位职责
2013/12/26 职场文书
音乐器材管理制度
2014/01/31 职场文书
供货协议书
2014/04/22 职场文书
教师评语大全
2014/04/28 职场文书
安全生产演讲稿
2014/05/09 职场文书
市场营销专业自荐书
2014/06/10 职场文书
人大调研汇报材料
2014/08/14 职场文书
作文评语集锦
2014/12/25 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang