ES6学习笔记--字符串与数值的拓展

简介: ES6学习笔记--字符串与数值的拓展

字符串的拓展

两个在业务中常用的拓展

  • 字符串的遍历器接口

ES6为字符串提供了遍历器接口,使得字符串可以被for...of所遍历。

之前遍历字符串的方法

let str = 'string'
for(let i =0;i<str.length;i++){
    console.log(str[i])// s t r i n g
}

for...of遍历字符串

let str = 'string'
for(let i of str){
    console.log(i) //s t r i n g
}
  • 模板字符串

之前我们输出一些变量+字符通常这样操作。

let name = 'David'
console.log('Hello,'+name+'!') //Hello,David!

用了模板字符串之后可以这样子操作

let date = new Date()
console.log(`今天是${date.getMonth()+1}月${date.getDate()}号`) //今天是7月9号

`${}`这是模板字符串的语法,大括号里面可以放置任意的JavaScript代码,例如变量,函数。


字符串拓展API

includes()startsWith()endsWith()

ES5中有indexOf方法可以确定一个字符是否存在于一个字符串中

function inString(char, string) {
    return string.indexOf(char)
}
inString('a', 'abc') //0 表示在字符串的0位置
inString('d', 'abc')//-1 表示不在字符串中

ES6中新增了3个方法,可以用来确定一个字符串是否存在与另一个字符串中。

第一个参数是要检验的字符串,第二个参数是开始的位置。

  • includes():返回布尔值,表示是否找到了参数字符串。
let s = 'hello'
s.includes('hel') //true
s.includes('helloh') //false
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
let s = 'hello'
s.startsWith('he') //true
s.startsWith('heq') //true
s.startsWith('he', 0) //true
s.startsWith('llo', 2) //true
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true

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


repeat()

repeat()方法返回一个新字符串,表示将原字符串重复n次

'x'.repeat(2) //xx
'x'.repeat(2.1)//xx
'x'.repeat(2.6)//xx    

如果传入的是小数,则会被取整


padStart()padEnd()

如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

'x'.padStart(5,'ab') //ababx
'x'.padStart(4, 'ab')//abax
'xxx'.padStart(3, 'ab')//xxx

'x'.padEnd(5, 'ab')//xabab
'x'.padEnd(4, 'ab')//xaba
'xxx'.padEnd(3, 'ab')//xxx

第一个参数是要补充成的字符串的长度,如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。


trimStart()trimEnd()

let s = '   abc  a'
s.trimStart()//abc   
s.trimEnd() //   abc

这两个方法并不会修改原字符串,而是会返回一个新的字符串

数值的拓展

Number.isFinite() Number.isNaN()

这两个方法是ES6在Number对象上新提供的方法

Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity

Number.isFinite(15) //true
Number.isFinite('a')//false
Number.isFinite(NaN)//false
Number.isFinite(Infinity)//false

如果参数类型不是数值,则一律返回false

Number.inNaN()用来检查一个值是否为NaN

Number.isNaN(15) //false
Number.isNaN('a'/1) //true
Number.isNaN(NaN)  //true
Number.isNaN('true'/2) //true

如果参数类型不是NaN,则一律返回false

它们与传统的全局方法isFinite()isNaN()的区别是,前两个方法使用时,会对传入的参数类型先做校验和转换,而而这两个新方法只对数值有效。


Number.parseInt()Number.parseFloat()

ES6将全局方法parseInt()parseFloat()移植到Number对象上,行为与之前完全一样

Number.parseInt(13.12) //13
Number.parseFloat(`10.12#`)//10.12

Number.isInteger()

这个函数用来判断一个数值是否为整数

Number.isInteger(13.12) //false    
Number.isInteger(`abc`) //false    
Number.isInteger(1)  //true    
Number.isInteger(NaN) //false

指数运算符**

2 ** 2 // 4
2 ** 3 // 8

这个运算符的一个特点是右结合,而不是常见的左结合。多个指数运算符连用时,是从最右边开始计算的。

2 ** 3 ** 2
//相当于 2 ** (3 ** 2)
// 512

上面代码中,首先计算的是第二个指数运算符,而不是第一个。

指数运算符可以与等号结合,形成一个新的赋值运算符(**=)。

let a = 1.5;
a **= 2;
// 等同于 a = a * a;

let b = 4;
b **= 3;
// 等同于 b = b * b * b;
相关文章
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
57 1
|
6月前
|
Serverless 网络架构
ES6学习笔记--函数与数组的拓展
ES6学习笔记--函数与数组的拓展
|
6月前
|
存储 安全 JavaScript
ES6学习之数值
ES6学习之数值
|
JavaScript 前端开发 安全
ES6(数值的扩展)
ES6(数值的扩展)
66 0
|
11月前
ES6学习(三)—字符串的扩展
ES6学习(三)—字符串的扩展
|
11月前
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法
|
JavaScript 前端开发
如何把传统写法改成框架形式 es6
如何把传统写法改成框架形式 es6
50 0
ES6: 字符串与数值拓展
ES6: 字符串与数值拓展
47 0
【ES6】数值相关拓展
【ES6】数值相关拓展
70 0