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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
详解JavaScript自定义函数
Jul 29 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
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JSON格式化输出
2014/11/10 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
Python实现的直接插入排序算法示例
2018/04/29 Python
python实现支付宝转账接口
2019/05/07 Python
python 获取等间隔的数组实例
2019/07/04 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
给物业的表扬信
2014/01/21 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
党员干部承诺书
2014/03/25 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
故意伤害辩护词
2015/05/21 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2015入党个人自传范文
2015/06/26 职场文书
护理培训心得体会
2016/01/22 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技