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 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
详谈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
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
Element中Slider滑块的具体使用
2020/07/29 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
查看keras的默认backend实现方式
2020/06/19 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
食堂个人先进事迹
2014/01/22 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
学风建设演讲稿
2014/09/12 职场文书
2015年财政所工作总结
2015/04/25 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
食堂卫生管理制度
2015/08/04 职场文书
聘任书范文大全
2015/09/21 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
python语言中pandas字符串分割str.split()函数
2022/08/05 Python