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代码
Nov 23 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
常用js脚本
2006/12/03 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
Element Input组件分析小结
2018/10/11 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
大学系主任推荐信范文
2013/12/24 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
买卖合同协议书范本
2014/10/18 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
投资申请报告
2015/05/19 职场文书
律师催款函范文
2015/06/24 职场文书
开学典礼校长致辞
2015/07/29 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
《三国志》赏析
2019/08/27 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫