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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
javascript中的几个运算符
2007/06/29 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
xml转json的js代码
2012/08/28 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
vue.js中created方法作用
2018/03/30 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
python实现socket端口重定向示例
2014/02/10 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Django实现分页显示效果
2019/10/31 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
会计电算化大学生职业规划书
2014/02/05 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
高一军训决心书
2015/02/05 职场文书
行政处罚告知书
2015/07/01 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL