ES6的迁移之路---[2]

前言

接着写没写完的！今天主要针对的是数据类型的迁移、这一篇主要针对Number、String

Number

二进制和八进制的新的表示方法

二进制以’0b’或者’0B’开头
八进制以’0o’或者’0O’开头

0b111110111 === 503 // true
0o767 === 503 // true
//二进制和八进制转化为十进制
Number('0b111')  // 7
Number('0o10')  // 8

Number对象新增的方法

Number.isFinite()检测一个数值是不是有限的,只有数字且是有限的才会返回true,否则一律是false
Number.isNaN(),检测一个数值是不是NaN,只有数字且是NaN的时候才会返回true,否则一律false

{
  Number.isFinite(123);  // true
  Number.isFinite("123");  // false
  Number.isFinite("sd");  // false
  Number.isNaN(NaN);  //true
  Number.isNaN(123);  //false
}

Number.parseInt(),Number.parseFloat()将全局的parseInt和parseFloat移植到Number对象上,行为不变
Number.isInteger(),判断数值是不是整数

// 3.0000000000000002达到了小数点后16个10进制位数,转换为2进制就超出了2^53,所以最后一个2被忽略了,仍然被认为是整数
Number.isInteger(3.0000000000000002) // true
console.log('25',Number.isInteger(25));// true
console.log('25.0',Number.isInteger(25.0));//true
console.log('25.1',Number.isInteger(25.1));//false
console.log('25.1',Number.isInteger('25'));//false

Number.EPSILON,是一个常量,表示1和大于1的最小浮点数的差

1	Number.EPSILON === Math.pow(2,-52); // true

Number.isSafeInteger(),判断一个整数是不是在常量Number.MIN_SAFE_INTEGER和Number.MAX_SAFE_INTEGER之间,包括2端

{
  console.log(Number.MAX_SAFE_INTEGER,Number.MIN_SAFE_INTEGER);
  console.log('10',Number.isSafeInteger(10));//true
  console.log('a',Number.isSafeInteger('a'));//false
}

Math对象的拓展

Math.trunc()方法用于去除一个数的小数部分，返回整数部分。

{
  console.log(4.1,Math.trunc(4.1));//4
  console.log(4.9,Math.trunc(4.9));//4
}

注意参数为非数值时，Math.trunc()方法会先用Number()将其转换为数值，若无法获取数值的整数部分，比如字符串或NaN或空值等，会返回NaN.

1	console.log(Math.trunc(NaN),Math.trunc('foo'),Math.trunc())//NaN,NaN,NaN

Math.sign()方法用来判断一个数到底是正数、负数还是0

(1)参数为正数返回+1
(2)参数为负数返回-1
(3)参数为0返回0
(4)参数为-0返回-0
(5)其他值返回NaN

console.log(
  Math.sign(-5),
  Math.sign(5),
  Math.sign(0),
  Math.sign(NaN),
  Math.sign('aaa'),
  Math.sign()
  )//-1,1,0,NaN,NaN,NaN

Math.cbrt()方法用于计算一个数的立方根

{
  console.log('-1',Math.cbrt(-1));-1
  console.log('8',Math.cbrt(8));2
}

Math.hypot()方法返回所有参数的平方和的平方根。

Math.hypot(3,4)//5
Math.hypot(3,4,5)//7.07106
Math.hypot()//0
Math.hypot(NaN)//NaN
Math.hypot(3,4,'foo')//NaN
Math.hypot(3,4,'5')//7.07106
Math.hypot(-3)//3

注意Math.hypot()会把非数值参数转换为数值，若有一个参数不能转为数值就返回NaN.

ES6新增了6个三角函数方法.

(1)Math.sinh(x) 返回x的双曲正弦
(2)Math.cosh(x) 返回x的双曲余弦
(3)Math.tanh(x) 返回x的双曲正切
(4)Math.asinh(x) 返回x的反双曲正弦
(5)Math.acosh(x) 返回x的反双曲余切
(6)Math.atanh(x) 返回x的反双曲正切
ES7增加了一个指数运算符**,可以与等号结合

2**3//8
let a=2;
a**=2;//等价于a=a**a;

String类型

includes(), startsWith(), endsWith()

从字面就可以明白，一个是看是否包含子串，一个是是否以子串开头，一个是是否以子串结尾。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

includes()比indexOf()的优势在于，indexOf()的返回结果不是布尔值，须与-1对比，不够直观。
这三个方法都支持第二个参数，表示从哪里开始检索。

其中，includes()和startsWith()的默认值是0，表示检索范围是参数值检索到末尾，很简单不多说。

endsWith()很特殊，它第二个参数的默认值是字符串总长度值，表示检索范围是从开头检索到这个值。

let s = 'Hello world!';

s.includes('Hello', 6) // false 从左起第6位到末尾的范围内检索，结果是没找到
s.startsWith('world', 6) // true 从左起第6位到末尾，看看是不是以world开头，结果是
s.endsWith('Hello', 8) // false 从开头找到第8位，看看是不是以Hello结束，结果不是

repeat()

表示重复多少次。

如果参数是正小数，会取整。
如果参数是负数，会报错。
如果参数是0，会得到空串。
如果参数是字符串、布尔型或其他类型，会先换算成整数。

{
  let str="abc";
  console.log(str.repeat(2));//abcabc
}

padStart()，padEnd()

这两个是ES8（也就是2017）新增方法
用于在开头补全字符和在末尾补全字符，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

{
  console.log('1'.padStart(2,'0'));//01
  console.log('1'.padEnd(2,'0'));//10
}

重点模板字符串

{
  let name="list";
  let info="hello world";
  let m=`i am ${name},${info}`;
  console.log(m);//i am list,hellow world

  let user={
    name:'list',
    info:'hello world'
  };
  console.log(abc`i am ${user.name},${user.info}`);//abci am list,hellow world

  console.log(String.raw`Hi\n${1+2}`);//Hi\n3
  console.log(`Hi\n${1+2}`);//h(换行了)3
}

我们可以看出，现在这种写法更加的友好了。
比如有一段HTML是：

<div class="page">
  <div class="box">
    <a target="_blank" class="news-link" href="/news/92199/nodemon-1-14-8">Nodemon v1.14.8 发布</a>
    <span class="box-fr news-date">01/07</span>
  </div>
  ... 重复若干个div.box
</div>

我就可以设一个返回最终HTML的函数，这个函数使用了ES6的简写方法

const createTmpl = boxes => `
<div class="page">
  ${boxes.map(box => `
  <div class="box">
    <a target="_blank" class="news-link" href="${box.href}">${box.title}</a>
    <span class="box-fr news-date">${box.date}</span>
  </div>
  `).join('')}
</div>
`;

let boxdata = [
    {href: "http://...1", title: "biaoti1", date: "01/08"},
    {href: "http://...2", title: "biaoti2", date: "02/08"},
];

createTmpl(boxdata);

然后传入数据，调用函数，得到：

"
<div class="page">

  <div class="box">
    <a target="_blank" class="news-link" href="http://...1">biaoti1</a>
    <span class="box-fr news-date">01/08</span>
  </div>

  <div class="box">
    <a target="_blank" class="news-link" href="http://...2">biaoti2</a>
    <span class="box-fr news-date">02/08</span>
  </div>

</div>
"

今天就写到这里吧，下次给大家带来Array、Object、Function的变化