2019年Web开发中值得关注的新特性(1/4)

马上圣诞节了，想起去年的AntD发生的圣诞彩蛋事件，时间过得可真快啊。。

这一年Web开发领域有了进一步的发展，有哪些值得开发者关注的新特性呢？

本系列内容均总结自此Youtube频道，有条件的可以观看原视频。

数值分隔符(Numeric separators)

第一眼我以为是类似100000可以写成100,000的方式，其实不然，它使用_作为分隔符，且可以以任意间距分隔数字

例如，12300，写成123_00可以代表123元整；1_2300表示1万2千3百元。

所以其实是更广泛的语义化分隔符，注意：并不支持两个分隔符连写，即__会报错：

Intl

Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。

还记得toLocaleString的一些骚操作吗？（JS各语言货币文本显示）它可以返回某个值在指定语言下的字符串，Intl提供了类似的方式。

示例：

TimeFormatter = new Intl.RelativeTimeFormat('zh-CN')
TimeFormatter.format(-3, 'minute') // "3分钟前"
TimeFormatter.format(4, 'day') // "4天后"

matchAll

matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

感觉对正则一直都不是了解太多，需要的时候找个正则就直接用了😂，感觉是对原有match方法的补充。

方式的返回值是一个Iterator（迭代器）对象，使用for...of方式遍历。

示例：

let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
console.log(str.match(regexp)) // ["test1", "test2"]
for(const a of str.matchAll(regexp)) {
  // ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined]
  // ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]
  console.log(a)
	console.log(a[0]) // test1 0
  console.log(a.index) // test2 5
}

Class私有属性

JavaScript的Class出了也就3年左右的功夫，有时候我们会拿它和其他语言比如Java中的类进行比较，都是面向对象的数据类型，但JS的相对简单，我们之前在实现Class的私有属性时，往往都是借助中间属性，比如：

class Counter {
	constructor(initValue){
  	this._count = initValue
  }
  increment() {
  	this._count ++
  }
  get count() {
  	return this._count
  }
}

const a = new Counter(4)
a.increment()
console.log(a.count) // 5
console.log(a._count) //5
a._count ++
console.log(a.count) // 6

其实也基本满足我们的需求，只要我们不故意去修改内部属性，大部分情况都是可以的。

但这并不是完全的私有属性，存在安全性隐患，所以Class新增了私有属性，意味着实例无法直接修改它的属性了。

class Counter {
	#count

	constructor(initValue){
  	this.#count = initValue
  }
  increment() {
  	this.#count ++
  }
  get count() {
  	return this.#count
  }
}

const a = new Counter(4)
a.increment()
console.log(a.count)
console.log(a.#count) // Error!