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定义类和对象的几种方式
Nov 09 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
微信小程序实现天气预报功能
Jul 18 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
javascript eval函数深入认识
2009/02/21 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
用JS实现选项卡
2020/03/23 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
解决python selenium3启动不了firefox的问题
2018/10/13 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
经济系大学生求职信
2013/10/01 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
家长会演讲稿范文
2014/01/10 职场文书
接待员岗位责任制
2014/02/10 职场文书
会计核算科岗位职责
2014/03/19 职场文书
十佳党员事迹材料
2014/08/28 职场文书
学习型党组织心得体会
2014/09/12 职场文书
爱心捐款感谢信
2015/01/20 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
Python数组变形的几种实现方法
2022/05/30 Python