TC39 Proposals

Any application that can be written in JavaScript, will eventually be written in JavaScript. ------Jeff Atwood

1 什么是TC39?

首先说下Javascript和ECMAScript的区别:

Javascript: the programming language that is implemented by various platforms (browsers, Node.js, Deno, etc.)

ECMAScript is designed by the Technical Committee 39 (TC39) of the standards organization Ecma International.

ECMAScrip名称中的‘ECMA’部分来源于Ecma组织,这是一个总部设在瑞士的标准化组织。

ECMA最初是“欧洲计算机制造商协会”的首字母缩写,其最初的名称后来演变为Ecma国际(Ecma)。

Ecma开发了许多与计算机产业有关的标准,制定标准的实际工作由Ecma技术委员会负责,该委员会简称‘TC’。当一个新的Ecma TC被创建的时会被分配一个序列号作为唯一标识,TC39是为了标准化Javascript而创建的TC。

Ecma会为其TC撰写的每份不同的标准各分配一个编号,并添加ECMA-前缀。ECMAScript标准被指定为ECMA-262。

TC39 成员来自于Adobe, Apple, Facebook, Google, Microsoft, Mozilla, Opera, Twitter等公司

image.png

Every two months, TC39 has meetings that member-appointed delegates and invited experts attend. The minutes of those meetings are public in a GitHub repository.

2 TC39提案流程

New ECMAScript features must be proposed to TC39.

image.png
  1. ECMAScript 各项特性独立设计,历经 5 个阶段,从 Stage 0(Strawman,初稿)开始,经 Stage 1(提案)、Stage 2(草案)、Stage 3(候选提案),最后到 Stage 4(Finished,过审提案)结束

  2. Stage 1阶段需要明确解决的问题和大致的解决方案,Stage 2使用正式的语言详细地描述语法、语义,运行时行为变更,Stage 3阶段在各种javascript引擎中实现并根据实现反馈微调,Stage 4定案阶段准备在接下来的ECMAScript年度版本中发布

  3. 要求在后几个阶段进行原型实现和实际测试(由Test 262负责),以便在设计和实现之间形成反馈循环

  4. ECMAScript 每年发布一版,囊括截止最后发版日期之前所有已经进入第 4 阶段的特性

  5. 如果你对某个提案有需求、意见,或者对于语言特性有新的需求,可以在提案的Stage0、1、2阶段参与进来。有很多方式可以参与:直接加入GitHub Issues讨论、更新spec text等等。对于一些新的想法,也可以通过下面的网址找找有没有在TC39中讨论过。

GitHub上: https://github.com/tc39/proposals
会议记录: https://github.com/tc39/notes
讨论组: https://es.discourse.group

2.1 stage 4

在第 4 阶段,一个规范已经完成,并被确定会包含到 ECMAScript 规范草案中。除非在特殊情况下,否则该提案是完整的、稳定的,并可随时发布。通常各个实现默认开启第 4 阶段的特性,没有任何特殊的标志。不去实现和交付第 4 阶段的特性,就有可能使该实现与其他实现不同步。

提案汇总

2.2 stage 3

在第 3 阶段,委员会正在全力考察一项功能,并已就具体细节达成一致。但实施过程仍然可能导致语义上的变化,甚至一些第 3 阶段的功能已经被完全放弃。追求稳定性的项目如果想完全交付这些功能,在交付第 3 阶段的功能之前,通常会使用一定程度的个例测试。

提案汇总

2.2.1 JSON Modules

import json from "./foo.json" assert { type: "json" };
import("foo.json", { assert: { type: "json" } });

2.2.2 Temporal

Date has been a long-standing pain point in ECMAScript. This proposes Temporal, a global Object that acts as a top-level namespace (like Math), that brings a modern date/time API to the ECMAScript languag.

原事件方案缺点:

  • 不支持除用户本地时间以外的时区,不支持开发人员通过API来切换时区信息
  • 计算API缺失,如比较两个时间的长短,时间之间的加减运算
  • 不支持非公历,各国无法使用自己的历法,如中国的农历
image.png
image.png

2.2.3 Import Assertions

The Import Assertions proposal adds an inline syntax for module import statements to pass on more information alongside the module specifier. The initial application for such assertions will be to support additional types of modules in a common way across JavaScript environments, starting with JSON modules.

2.3 stage 2 、stage1、stage0

在第 0、1 和 2 阶段,语义细节尚无定论。委员会还没有就该提案的所有具体细节达成共识。在这个阶段的实现应该被认为是实验性和推测性的。这个阶段的实现对于程序员的实验是非常有价值的,它可以帮助完善语言的设计。实现往往通过特殊的标志来暴露这个阶段的特征,这些标志在默认情况下是不启用的。

提案汇总

2.3.1 Pipe Operator (|>) for JavaScript

image.png
  • %代表上一次操作的返回值
  • |> 右侧可以是任何合法的表达式

3 ES2022

3.1 .at()

const cart = ['🍎', '🍌', '🍍'];

// first element
cart.at(0); // '🍎'

// last element
cart.at(-1); // '🍍'

// out of bounds
cart.at(-100); // undefined 
cart.at(100); // undefined 

3.2 Top level await

const i18n = await import(`./content-${language}.mjs`);

// 依赖倒退
let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

3.3 Error cause

try {
  maybeWorks();
} catch (err) {
  throw new Error('maybeWorks failed!', { cause: err });
}

3.4 Object.hasOwn

let books = {}
books.prop = 'exists';

// `hasOwn` will only return true for direct properties:
Object.hasOwn(books, 'prop');             // returns true
Object.hasOwn(books, 'toString');         // returns false
Object.hasOwn(books, 'hasOwnProperty');   // returns false

// The `in` operator will return true for direct or inherited properties:
'prop' in books;                          // returns true
'toString' in books;                      // returns true
'hasOwnProperty' in books;                // returns true

与hasOwnProperty区别:

const obj = Object.create({});
obj.name = "xl";
console.log(obj.hasOwnProperty("name")); // true

const obj1 = Object.create(null);
obj1.name = "xl";
try {
  console.log(obj1.hasOwnProperty("name"));
} catch (error) {
  console.log(error); // error: obj1.hasOwnProperty is not a function
}
const obj2 = Object.create(null);
obj2.name = "xl";
console.log(Object.hasOwn(obj2, "name")); // true

3.5 RegExp match indices

However, there are several more advanced scenarios where this information may not necessarily be sufficient. For example, an ECMAScript implementation of TextMate Language syntax highlighting needs more than just the index of the match, but also the start and end indices for individual capture groups.

原文

// 至少一个 a 以及 0 个或者 1 个 z ,其中包含一个命名为 Z 的捕获组
const re1 = /a+(?<Z>z)?/d;

// indices are relative to start of the input string:
const s1 = "xaaaz";
const m1 = re1.exec(s1);
m1.indices[0][0] === 1;
m1.indices[0][1] === 5;
s1.slice(...m1.indices[0]) === "aaaz";

m1.indices[1][0] === 4;
m1.indices[1][1] === 5;
s1.slice(...m1.indices[1]) === "z";

m1.indices.groups["Z"][0] === 4;
m1.indices.groups["Z"][1] === 5;
s1.slice(...m1.indices.groups["Z"]) === "z";

// capture groups that are not matched return `undefined`:
const m2 = re1.exec("xaaay");
m2.indices[1] === undefined;
m2.indices.groups["Z"] === undefined;

// e.g 
const matchObj = /(a+)(b+)/g.exec('aaaabb');
const matchObj = /(a+)(b+)/d.exec('aaaabb');

3.6 Class field declarations

class SampleClass {
    /*
      instead of:
      constructor() { this.publicID = 42; }
    */
    publicID = 42; // public field

    /*
      instead of:
      static get staticPublicField() { return -1 }
    */
    static staticPublicField = -1;

    // static private field
    static #staticPrivateField = 'private';

    //private methods
    #privateMethod() {}

    // static block
    static {
      // executed when the class is created
    }
}

参考资料:

  1. https://h3manth.com/ES2022/#ergonomic-brand-checks-for-private-fields

  2. https://www.honeybadger.io/blog/import-maps/

  3. https://2ality.com/2022/06/ecmascript-2022.html

  4. https://exploringjs.com/impatient-js/ch_new-javascript-features.html

  5. https://juejin.cn/post/6966631751951056903

  6. https://juejin.cn/post/7116106112620822564

  7. https://juejin.cn/post/7073285958791069704

  8. https://tc39.es/zh-Hans/

  9. https://github.com/i5ting/giac-2022-big-frontend

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容