当前位置:首页 > 日记 > 正文

ES6字符串模板,剩余参数,默认参数功能与用法示例

ES6字符串模板,剩余参数,默认参数功能与用法示例

本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法。分享给大家供大家参考,具体如下:

这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用。
先来说说字符串模板。

字符串模板

ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。

//产生一个随机数var num=Math.random();//将这个数字输出到consoleconsole.log(`your num is ${num}`);

可以看出来,字符串模板其实就是将JavaScript中常用的字符串拼接变得更加简单了一些。但是其实它还有一些不易让人察觉的作用:

1. 模板中可以继续套入一个模板;

2. 如果一个变量不是字符串,通过字符串模板它会变成字符串,就好像调用了.toString()方法一样;

但是同样的,有一些事情它也做不了:

1. 它不能自动转义,所以为了防止CORS攻击,我们还是要小心处理一些敏感数据;

2. 它不是用来取代其他js模板的,因为它没有关于循环的相关语法,而这些是其他js模板擅长的。

下图是字符串模板的使用示例:

可以看到字符串模板中还可以解析函数,并且可以带参数。

剩余参数

接下来说说剩余参数,很多语言早就实现了剩余参数了。剩余参数说来了就是用来取代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深拷贝的原理与实现方法

方法,深拷贝,原理,电脑软件,javascript,本文实例讲述了javascript深拷贝的原理与实现方法。分享给大家供大家参考,具体如下:要讲JavaScript的拷贝,就得先讲讲javascript中的值传递和引用传递。javascript中没有一个具体的语法来规定哪些参数是…

excel中分列单元格的教程

excel中分列单元格的教程

教程,单元格,电脑软件,excel,  Excel中的单元格该如何分列呢?下面是由小编分享的excel中分列单元格的教程,以供大家阅读和学习。excel中分列单元格的教程:  分列单元格步骤1:打开需要分列的excel表分列单元格步骤2:选中需要分列的数据,在exc…

微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解

详解,实例,程序,电脑软件,微信小,微信小程序 wx:for的使用实例详解在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现。一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进…

excel中怎么使用记录单增加信息exc

excel中怎么使用记录单增加信息exc

使用记录,步骤,方法,电脑软件,excel,  使用Excel统计数据信息,面对信息的插入,少量数据可以直接点击表格输入数据。但是如果数据量达到2-3万条,就是拖动也需要花费一定的时间。加上如果一条数据存在多个列,导致输入过程变得更加费时。下…

关于彻底死心的个性签名

关于彻底死心的个性签名

个性签名,热门,简单,新篇,经典,  网络时代,几乎每个人都有自己的QQ号,每个QQ号都有属于自己的个性签名。表达彻底死心的个性签名有哪些?下面是彻底死心的个性签名,希望小编整理的对你有用,欢迎阅读:关于彻底死心的个性签名【经典篇】下一站,会…

Angular.js中window.onload | ,$ |

Angular.js中window.onload | ,$ |

写法,电脑软件,window,js,Angular,一,问题发现:最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代…

深入理解Vue2.x的虚拟DOM diff原理

深入理解Vue2.x的虚拟DOM diff原理

虚拟,原理,电脑软件,diff,DOM,前言经常看到讲解Vue2的虚拟Dom diff原理的,但很多都是在原代码的基础上添加些注释等等,这里从0行代码开始实现一个Vue2的虚拟DOM实现VNodesrc/core/vdom/Vnode.jsexport class VNode{ constructor ( tag, //标…

微信小程序实现实时圆形进度条的方

微信小程序实现实时圆形进度条的方

方法,实时,圆形进度条,示例,程序,前言最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧。效果图如下初始状态点击中间按钮开始绘制绘制过程绘…

Vue开发过程中遇到的疑惑知识点总

Vue开发过程中遇到的疑惑知识点总

知识点,过程中,疑惑,电脑软件,Vue,前言Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。最近终于有时间空下来,…

ps如何进行抠图更换背景

ps如何进行抠图更换背景

抠图,方法,背景,电脑软件,ps,  如果图片的背景需要更换,大家可以使用ps来抠图再换背景。其实这个也不算太难,下面就让小编告诉你ps如何进行抠图更换背景的方法,一起学习吧。ps进行抠图更换背景的方法首先第一步抠图1、打开PS软件,在PS界面里…

浅谈JavaScript异步编程

浅谈JavaScript异步编程

异步编程,浅谈,电脑软件,JavaScript,在一年前初学js的时候,看过很多关于异步编程的讲解。但是由于实践经验少,没有办法理解的太多,太理论的东西也往往是看完就忘。经过公司的三两个项目的锻炼,终于对js异步编程有了比较具体的理解。但始终入门…

js判断是否是手机页面

js判断是否是手机页面

手机页面,判断是否,电脑软件,js,话不多说,请看代码:<script>if (/mobile/i.test(navigator.userAgent) || /android/i.test(navigator.userAgent)) document.body.classList.add('mobile');window.addEventListener('load', function(eve…