ES6学习笔记(二)——字符串扩展

相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味。主要是这样学完一遍之后,没过一段时间就忘到九霄云外了。不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看。

在这样不断的学习过程中,也提高了自己的总结能力:)

1.字符串的遍历器接口

ES5,数组和对象可以进行遍历,使用for() for...in,还有jq中的each()方法进行遍历。

ES6为我们提供了字符串遍历器  for...of 循环遍历

优点:可以识别大于0xFFFF的码点,传统的for循环是无法识别的。

 for(let i of ‘hello‘){
    console.log(i);  //依次输出‘h’ 、‘e’、‘l’、‘l’、‘o’
 }

2.at()方法

ES5中字符串有charAt()方法,返回字符串给定位置的字符,该方法不能识别码点大于0xFFFF的字符。

‘lemon‘.charAt(0); //‘l‘
‘??‘.charAt(0) // "\uD842"

字符串实例的at方法,可以识别Unicode编号大于0xFFFF的字符,返回正确的字符。

‘lemon‘.at(0); //‘l‘
‘??‘.at(0) // "??"

3.includes()、startsWith()、endsWith()

ES5,有indexOf()方法,确定某个字符串是否包含在另外一个字符串中。

ES6,又提供三种新的方法:

  • includes(str,[place]):返回布尔值,表示是否找到了参数字符串。
  • startsWith(str,[place]):返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith(str,[place]):返回布尔值,表示参数字符串是否在源字符串的尾部。

这三个方法都支持第二个参数,表示开始搜索的位置。

注意:使用第二个参数n 时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

 var s1 = ‘Hello world!‘;

 s1.startsWith(‘Hello‘) // true
 s1.endsWith(‘!‘) // true
 s1.includes(‘o‘) // true
//-------------------------------
var s2 = ‘happy day!‘;

  console.log(s2.startsWith(‘day‘, 6)); // true,表示从第0个字符开始
  console.log(s2.includes(‘day‘, 6)); // true,表示从第0个字符开始

  console.log(s2.endsWith(‘happy‘, 5)); // true,表示前5个字符

  console.log(s2.includes(‘happy‘, 0)); // true,表示从第0个字符开始

4.repeat()方法

该方法返回一个新字符串,表示将原字符串重复n次。

根据其参数类型分为以下几种:

(1)参数是正整数;

(2)参数是小数,会被取整;

(3)参数是负数或Infinity会报错,如果参数是0到-1之间的小数,则等同于0;

(4)参数是NAN 等同于0;

(5)参数是字符串,则会先转换成数字;

  //1.参数是正整数
  console.log(‘hello‘.repeat(2)) // "hellohello"
  console.log(‘na‘.repeat(0)) // ""
  //2.参数是小数
  console.log(‘na‘.repeat(2.9)) // "nana"
  //3. 参数是Inifinity
  console.log(‘na‘.repeat(Infinity))
  //4. 参数是负数
  // RangeError
  console.log(‘na‘.repeat(-1))
  // RangeError
  //5. 参数是0~-1之间的小数
  console.log(‘na‘.repeat(-0.9)) // ""
  //6. 参数是NAN
  console.log(‘na‘.repeat(NaN)) // ""
  //7. 参数是字符串
  console.log(‘na‘.repeat(‘na‘)) // ""
  console.log(‘na‘.repeat(‘3‘)) // "nanana"

5.padStart()、padEnd()字符串补全长度方法

padStart()用于头部补全,padEnd()用于尾部补全。

padStartpadEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

这里我们也根据其参数分为以下几种类型:

(1)若原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

(2)若用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

(3)如果省略第二个参数,默认使用空格补全长度。

  //1.正常情况
  console.log(‘x‘.padStart(4, ‘ab‘) )// ‘abax‘
  console.log(‘x‘.padEnd(5, ‘ab‘)) // ‘xabab‘

  // 2.原字符串的长度,等于或大于指定的最小长度
  console.log(‘xxx‘.padStart(2, ‘ab‘)) // ‘xxx‘
  console.log(‘xxx‘.padEnd(2, ‘ab‘)) // ‘xxx‘
  // 3.补全的字符串与原字符串,两者的长度之和超过了指定的最小长度
  console.log(‘abc‘.padStart(10, ‘0123456789‘))// ‘0123456abc‘
  // 4.省略第二个参数
  console.log(‘x‘.padStart(4)) // ‘   x‘
  console.log(‘x‘.padEnd(4)) // ‘x   ‘

padStart的常见用途:

(1)为数值补全指定位数。下面代码生成10位的数值字符串。

(2)提示字符串格式。

//为数值补全指定位数
‘12‘.padStart(10, ‘0‘) // "0000000012"
‘123456‘.padStart(10, ‘0‘) // "0000123456"

//提示字符串格式。
‘12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-MM-12"
‘09-12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-09-12"

6.模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。

它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。如下:

 var string = `\`Hello\` World!`;
 console.log(string);//`Hello` World!

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。若不想要这个换行,可以使用trim方法消除它。

$(‘#list‘).html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量,需要将变量名写在${}之中。

大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。

var x = 1, y = 2,obj = {x: 1, y: 2};

  console.log(`${x} + ${y} = ${x + y}`);// "1 + 2 = 3"
  console.log(`${x} + ${y * 2} = ${x + y * 2}`);// "1 + 4 = 5"

  console.log(`${obj.x + obj.y}`);// 3

模板字符串之中还能调用函数。如下:

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`// foo Hello World bar

模板字符串甚至还能嵌套。

7.标签模板

8.String.raw()方法

ES6还为原生的String对象,提供了一个raw方法。

用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。

如果原字符串的斜杠已经转义,那么String.raw不会做任何处理。

String.raw方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。

String.raw方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。

String.raw({ raw: ‘test‘ }, 0, 1, 2);
// ‘t0e1s2t‘

// 等同于
String.raw({ raw: [‘t‘,‘e‘,‘s‘,‘t‘] }, 0, 1, 2);

9.模板字符串的限制

标签模板里面,可以内嵌其他语言。但是,模板字符串默认会将字符串转义,导致无法嵌入其他语言。

注:此笔记对ES6字符串扩展记录的不完整,这里我只记了一部分新增特性。深入学习戳?http://es6.ruanyifeng.com/#docs/string

时间: 2024-10-15 23:59:25

ES6学习笔记(二)——字符串扩展的相关文章

ES6学习笔记二:各种扩展

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 二:正则的扩展 三:Number的扩展 四:函数扩展 五:数组扩展 六:对象扩展

ES6学习笔记二 新的声明方式和变量的解构赋值!

新的声明方式 在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量的意思 let:它在英文中是让的意思,也可以理解成一种申明方式 const:它在英文中是常量的意思,在ES6中用来声明常量,常量可以理解成不变的量=>这里的不变不是值得不变,是内存地址的指针不变!!! var 声明: var在ES中是用来升级成全局变量的,我们可以做一个简单实例,声明一个变量,用co

es6学习笔记二:生成器 Generators

今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是"最具魔力的"?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来说,它使语言内部的常态行为变得更加强大,如果这都不算有魔力,我不知道还有什么能算. 不仅如此,此特性可以极大地简化代码,它甚至可以帮助你逃离"回调地狱". 既然新特性如此神奇,那么就一起深入了解它的魔力吧! ES6生成器(Generators)简介: 什么是生成器? 我

python学习笔记(二)-字符串方法

python的字符串内建函数: #====================常用方法=============================name = 'besttest' new_name = name.strip() #默认是去掉两边的空格和换行符 new_name= name.lstrip() #默认是去掉左边的空格和换行符 new_name= name.rstrip()#默认是去掉右边边的空格和换行符 new_name = name.count('t')#查找某个字符串在字符串里面出现

ES6学习笔记&lt;二&gt;

接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = function(){ console.log("say Hi!"); } document.getElementById("click_2").onclick = () => { let a = 1; let b = 2; console.log(a + b);

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

Android学习笔记二

17. 在ContentProvider中定义的getType()方法是定义URI的内容类型. 18. SQLiteDatabase类中的insert/delete/update/query方法其实也挺好用的,我在EquipmentProvider类中做了实现 19. Android专门有个单元测试项目(Android Test Project),在这个项目中,可以新建一个继承AndroidTestCase类的具体测试类来单元测试某个功能.我新建了一个AndroidTestProject项目,在

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTod