JavaScript 技术概述

HTML 定义网页的结构和内容,CSS 设置格式和外观,而 JavaScript 为网页添加交互性并创建丰富的 Web 应用。

¥Whereas HTML defines a webpage's structure and content and CSS sets the formatting and appearance, JavaScript adds interactivity to a webpage and creates rich web applications.

然而,在 Web 浏览器上下文中理解的总括术语 "JavaScript" 包含几个非常不同的元素。其中之一是核心语言(ECMAScript),另一个是 网络 API 的集合,包括 DOM(文档对象模型)。

¥However, the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the Web APIs, including the DOM (Document Object Model).

JavaScript,核心语言(ECMAScript)

¥JavaScript, the core language (ECMAScript)

JavaScript 的核心语言被 ECMA TC39 委员会标准化为一种名为 ECMAScript 的语言。"ECMAScript" 是语言标准的术语,但 "ECMAScript" 和 "JavaScript" 可以互换使用。

¥The core language of JavaScript is standardized by the ECMA TC39 committee as a language named ECMAScript. "ECMAScript" is the term for the language standard, but "ECMAScript" and "JavaScript" can be used interchangeably.

这种核心语言也用于非浏览器环境,例如 Node.js

¥This core language is also used in non-browser environments, for example in Node.js.

什么属于 ECMAScript 范围?

¥What falls under the ECMAScript scope?

除此之外,ECMAScript 定义了:

¥Among other things, ECMAScript defines:

  • 语言语法(解析规则、关键字、控制流、对象字面量初始化……)
  • 错误处理机制(throwtry...catch、创建用户定义的 Error 类型的能力)
  • 类型(布尔值、数字、字符串、函数、对象……)
  • 基于原型的继承机制
  • 内置对象和函数,包括 JSONMath数组 方法、parseIntdecodeURI 等。
  • 严格模式
  • A 模块系统
  • 基本内存模型

标准化流程

¥Standardization process

ECMAScript 版本每年由 ECMA 大会批准并作为标准发布。所有开发都在 Ecma TC39 GitHub 组织 上公开,其中包含提案、官方规范文本和会议记录。

¥ECMAScript editions are approved and published as a standard by the ECMA General Assembly on a yearly basis. All development is public on the Ecma TC39 GitHub organization, which hosts proposals, the official specification text, and meeting notes.

在 ECMAScript 第 6 版(称为 ES6)之前,规范每隔几年发布一次,通常用主要版本号来表示 - ES3、ES5 等。在 ES6 之后,规范以发布年份命名 - ES2017, ES2018 等。ES6 是 ES2015 的同义词。ESNext 是一个动态名称,指的是撰写本文时的下一个版本。ESNext 功能更准确地称为提案,因为根据定义,该规范尚未最终确定。

¥Before the 6th edition of ECMAScript (known as ES6), specifications were published once every several years, and are commonly referred by their major version numbers — ES3, ES5, etc. After ES6, the specification is named by the publishing year — ES2017, ES2018, etc. ES6 is synonymous with ES2015. ESNext is a dynamic name that refers to whatever the next version is at the time of writing. ESNext features are more correctly called proposals, because, by definition, the specification has not been finalized yet.

当前委员会批准的 ECMA-262 快照以 PDF 和 HTML 格式在 Ecma International 的 ECMA-262 语言规范页面 上提供。ECMA-262 和 ECMA-402 由规范编辑者持续维护和更新;TC39 网站托管最新的 ECMA-262ECMA-402 版本。

¥The current committee-approved snapshot of ECMA-262 is available in PDF and HTML format on Ecma International's ECMA-262 language specification page. ECMA-262 and ECMA-402 are continuously maintained and kept up to date by the specification editors; the TC39 website hosts the latest, up-to-date ECMA-262 and ECMA-402 versions.

新的语言功能,包括新语法和 API 的引入以及现有行为的修订,都以提案的形式进行讨论。每个提案都会经过 4 阶段过程,通常由 JavaScript 引擎在第 3 阶段或第 4 阶段实现,因此可供公众使用。

¥New language features, including introduction of new syntaxes and APIs and revision of existing behaviors, are discussed in the form of proposals. Each proposal goes through a 4-stage process, and is typically implemented by JavaScript engines at stage 3 or stage 4 and thus available for public consumption.

有关 ECMAScript 历史的更多信息,请参阅 维基百科 ECMAScript 条目

¥See Wikipedia ECMAScript entry for more information on ECMAScript history.

国际化 API

¥Internationalization API

ECMAScript 国际化 API 规范 是 ECMAScript 语言规范的补充,也由 Ecma TC39 标准化。国际化 API 为 JavaScript 应用提供排序规则(字符串比较)、数字格式化以及日期和时间格式化,让应用可以选择语言并根据需要定制功能。初始标准于 2012 年 12 月获批;浏览器中的实现状态在 Intl 对象的文档中进行跟踪。国际化规范现在每年都会得到批准,并且浏览器会不断改进其实现。

¥The ECMAScript Internationalization API Specification is an addition to the ECMAScript Language Specification, also standardized by Ecma TC39. The internationalization API provides collation (string comparison), number formatting, and date-and-time formatting for JavaScript applications, letting the applications choose the language and tailor the functionality to their needs. The initial standard was approved in December 2012; the status of implementations in browsers is tracked in the documentation of the Intl object. The Internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.

相关资源

¥Related resources

你可以通过多种方式参与或跟踪 ECMAScript 语言规范和 ECMAScript 国际化 API 规范及相关资源的当前工作:

¥There are a variety of ways you can participate in or just track current work on the ECMAScript Language Specification and the ECMAScript Internationalization API Specification and related resources:

DOM API

WebIDL

WebIDL 规范 提供了 DOM 技术和 ECMAScript 之间的粘合剂。

¥The WebIDL specification provides the glue between the DOM technologies and ECMAScript.

DOM 的核心

¥The Core of the DOM

文档对象模型 (DOM) 是一种跨平台、独立于语言的约定,用于表示 HTML、XHTML 和 XML 文档中的对象并与之交互。DOM 树中的对象可以通过使用对象上的方法来寻址和操作。W3C 标准化了核心文档对象模型,该模型定义了将 HTML 和 XML 文档抽象为对象的与语言无关的接口,并定义了操作此抽象的机制。在 DOM 定义的事物中,我们可以发现:

¥The Document Object Model (DOM) is a cross-platform, language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The W3C standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:

从 ECMAScript 的角度来看,DOM 规范中定义的对象被称为 "宿主对象"。

¥From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".

HTML DOM

HTML,Web 的标记语言,是根据 DOM 指定的。HTML 位于 DOM Core 中定义的抽象概念之上,还定义了元素的含义。HTML DOM 包括 HTML 元素上的 className 属性或 document.body 等 API。

¥HTML, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the meaning of elements. The HTML DOM includes such things as the className property on HTML elements, or APIs such as document.body.

HTML 规范还定义了对文档的限制;例如,它要求 <ul> 元素(表示无序列表)的所有子元素都是 <li> 元素,因为它们表示列表项。一般来说,它还禁止使用标准中未定义的元素和属性。

¥The HTML specification also defines restrictions on documents; for example, it requires all children of a <ul> element, which represents an unordered list, to be <li> elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.

正在寻找 Document 对象、Window 对象和其他 DOM 元素?阅读 DOM 文档

¥Looking for the Document object, Window object, and the other DOM elements? Read the DOM documentation.

其他值得注意的 API

¥Other notable APIs

非浏览器环境(如 Node.js)通常没有 DOM API,因为它们不与文档交互,但它们通常仍然实现许多 Web API,例如 fetch()setTimeout()

¥Non-browser environments (like Node.js) often do not have DOM APIs — because they don't interact with a document — but they still usually implement many web APIs, such as fetch() and setTimeout().

JavaScript 实现

¥JavaScript implementations

在浏览器环境及其他环境中使用了三种主要的 JavaScript 实现:

¥There are three main JavaScript implementations used in browser environments and beyond:

  • Mozilla 的 SpiderMonkey,用于 Firefox。这是第一个 JavaScript 引擎,由 Netscape 的 Brendan Eich 创建。
  • Google 的 V8,用于 Google Chrome、Opera、Edge、Node.jsDeno电子 等。
  • Apple 的 JavaScriptCore(也称为 SquirrelFish/Nitro),用于 Apple Safari 等 WebKit 浏览器,以及 Bun

除了上述实现之外,还有其他流行的 JavaScript 引擎,例如:

¥Besides the above implementations, there are other popular JavaScript engines such as:

  • 卡拉坎,用于早期版本的 Opera。
  • Microsoft 的 脉轮 引擎,用于 Internet Explorer(尽管它实现的语言正式称为 "JScript" 以避免商标问题)。Edge 的早期版本使用了新的 JavaScript 引擎,也被混淆地称为 脉轮
  • LibJS,用于 SerenityOS 的浏览器实现。
  • Mozilla 的 犀牛 引擎是用 Java 编写的 JavaScript 实现,主要由 Norris Boyd(也在 Netscape)创建。

有一些专门为非浏览器目的而定制的引擎:

¥There are some engines specifically tailored for non-browser purposes:

  • Engine262,一个用 JavaScript 编写的 JavaScript 引擎。它是为 JavaScript 开发者创建的,旨在探索新的语言功能并查找规范中的错误。
  • 可模块化 XS,用于物联网等嵌入式系统。
  • QuickJS,一个小型的嵌入式 JavaScript 引擎。
  • Meta 的 Hermes 引擎,是针对 React Native 优化的引擎。
  • Oracle 的 GraalJS,是 Oracle 实验室在 GraalVM 上构建的高性能实现。

JavaScript 引擎公开了一个公共 API,应用开发者可以使用该 API 将 JavaScript 集成到他们的软件中。到目前为止,最常见的 JavaScript 宿主环境是 Web 浏览器。Web 浏览器通常使用公共 API 来创建负责将 DOM 反映到 JavaScript 中的主机对象。

¥JavaScript engines expose a public API which application developers can use to integrate JavaScript into their software. By far, the most common host environment for JavaScript is web browsers. Web browsers typically use the public API to create host objects responsible for reflecting the DOM into JavaScript.

JavaScript 的另一个常见应用是作为(Web)服务器端脚本语言。JavaScript Web 服务器公开表示 HTTP 请求和响应对象的主机对象,然后可由 JavaScript 程序操作以动态生成网页。Node.js 就是一个流行的例子。

¥Another common application for JavaScript is as a (Web) server-side scripting language. A JavaScript web server exposes host objects representing a HTTP request and response objects, which can then be manipulated by a JavaScript program to dynamically generate web pages. Node.js is a popular example of this.

贝壳

¥Shells

JavaScript shell 允许你快速测试 JavaScript 代码片段,而无需重新加载网页。它们对于开发和调试代码非常有用。

¥A JavaScript shell allows you to quickly test snippets of JavaScript code without having to reload a web page. They are extremely useful for developing and debugging code.

独立的 JavaScript shell

¥Standalone JavaScript shells

以下 JavaScript shell 是独立环境,例如 Perl 或 Python。

¥The following JavaScript shells are stand-alone environments, like Perl or Python.

  • Node.js - Node.js 是一个可以轻松构建快速、可扩展的网络应用的平台。
  • ShellJS - Node.js 的可移植 Unix shell 命令。

基于浏览器的 JavaScript shell

¥Browser-based JavaScript shells

以下 JavaScript shell 通过浏览器的 JavaScript 引擎运行代码。

¥The following JavaScript shells run code through the browser's JavaScript engine.

工具和资源

¥Tools & resources

用于编写和调试 JavaScript 代码的有用工具。

¥Helpful tools for writing and debugging your JavaScript code.

火狐开发者工具

Web 控制台JavaScript 分析器调试器 等等。

学习 JavaScript

对于有抱负的 Web 开发者来说是一个极好的资源 — 在交互式环境中学习 JavaScript,通过简短的课程和交互式测试,并以自动评估为指导。前 40 节课程是免费的,完整的课程只需一次性支付少量费用。

TogetherJS

协作变得简单。通过将 TogetherJS 添加到你的网站,你的用户可以在网站上实时互相帮助!

Stack Overflow

带有 "JavaScript" 标签的 Stack Overflow 问题。

JSFiddle

编辑 JavaScript、CSS 和 HTML 并获取实时结果。使用外部资源并与你的团队在线协作。

Plunker

Plunker 是一个在线社区,用于创建、协作和分享你的 Web 开发想法。编辑 JavaScript、CSS 和 HTML 文件并获取实时结果和文件结构。

JSBin

JS Bin 是一款开源的协作式 Web 开发调试工具。

代码笔

Codepen 是另一种协作 Web 开发工具,用作实时结果游乐场。

StackBlitz

StackBlitz 是另一个在线游乐场/调试工具,它可以使用 React、Angular 等托管和部署全栈应用。

RunJS

RunJS 是一个桌面游乐场/便笺本工具,它提供实时结果以及对 Node 和浏览器 API 的访问。