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实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JS实现旋转木马轮播图
Jan 01 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求数组全排列,元素所有组合的方法
2016/05/05 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue实现购物车加减
2020/05/30 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python正则表达式的使用范例详解
2014/08/08 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
竞选生活委员演讲稿
2014/04/28 职场文书
数学系毕业生求职信
2014/05/29 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
开国大典观后感
2015/06/04 职场文书
活动宣传稿范文
2015/07/23 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android