关闭

初步探究ES6之字符串模板和剩余参数,默认参数

标签: es6javascript默认参数剩余参数字符串模板
2074人阅读 评论(0) 收藏 举报
分类:

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


字符串模板

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

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.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!`;
}
3
0
查看评论

【ES6】字符串的扩展

1.字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符,其中“xxxx”表示字符的码点。 "\u0061"// "a"但是,这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表...
  • lx583274568
  • lx583274568
  • 2016-07-28 07:39
  • 5094

ES6 函数参数默认值 default

参数默认值基本用法ES6允许为函数参数设置默认值,即直接写在参数定义后面。
  • zhao_shanshan
  • zhao_shanshan
  • 2016-07-04 16:31
  • 4119

ES6学习——新的语法:函数参数默认值

这个特性在其他语言中已经早有实现,ES6中加入了这个新特性,但是就目前来看还没有主流的浏览器支持这个特性,在没有这个特性之前,我们也经常会对函数参数设置默认值,例如下面这个例子: function foo(x,y) { x = x || 11; y = y || 31; co...
  • kittyjie
  • kittyjie
  • 2015-12-28 09:30
  • 7911

C++基础——使用字符串作为函数模板的实参

在const char* s = "hello";s的类型是const char*,"hello"的类型是const char[6]是数组类型,也就是与"hell"(const char[5])具有不同的数据类型。这一点在函数模板(以字符串...
  • lanchunhui
  • lanchunhui
  • 2015-11-07 15:19
  • 1234

js 剩余参数

js 剩余参数
  • Wangdanting123
  • Wangdanting123
  • 2016-10-18 14:47
  • 589

JS字符串使用占位符轻松实现拼接

在JavaScript中,我们常常会有这样的需求,异步加载数据,并以元素追加的方式追加到页面中。 在拿到后台数据后,需要手动替换元素中的动态内容并拼接元素节点,写起来不仅麻烦,而且可读性非常差。 因此,我们可以自己来实现占位符替换功能。 核心代码 //var str = &quo...
  • qq_23616601
  • qq_23616601
  • 2017-08-22 16:15
  • 1473

React Native 中 ES6+ 和 ES5 语法比较

React Native 中 ES6+ 和 ES5 语法比较JS 更新快,所以基于 JS 的 RN 语法更新也挺大。在阅读别人代码或项目开发时经常会碰到 EMACScript 新旧格式语法写的程序,给我们的理解造成困扰。所以总结了一些新旧 JS 语法的对比。1. 模块1.1 引用ES5 中,通过 r...
  • wangzengdi
  • wangzengdi
  • 2016-02-22 22:21
  • 6211

es6模板字符串中标签模板作为参数时产生空元素的问题

当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,…values) arr:模板字符串中所有那些没有变量替换的部分 …values:各个变量替换后的值 即let a = 'Oh!'; let b = 'the'; let c = 'very ...
  • Elephant_H
  • Elephant_H
  • 2017-07-21 22:51
  • 313

ES6 函数参数的默认值

基本用法在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法。function log(x,y){ y = y||'world'; console.log(x,y); } log('kkk');//kkk world这种写法的缺点在于: ...
  • qq_32021031
  • qq_32021031
  • 2017-09-11 16:59
  • 193

ES6模板字面量

前面的话   JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串、字符串格式化、HTML转义等。ES6通过模板字面量的方式进行了填补,模板字面量试着跳出JS已有的字符串体系,通过一些全新的方法来解决类似的问题。本文将详细介绍ES6模板字面量  ...
  • wodeai1235
  • wodeai1235
  • 2017-08-04 14:32
  • 180
    个人资料
    • 访问:312106次
    • 积分:4631
    • 等级:
    • 排名:第7503名
    • 原创:146篇
    • 转载:0篇
    • 译文:0篇
    • 评论:86条
    博客专栏