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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
vue-cli点击实现全屏功能
Mar 07 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
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
大四学生毕业自荐信
2013/11/07 职场文书
如何在C++中调用Python
2021/05/21 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL