目標:2021年2月起,每周一篇文章翻譯,從跟程式相關的短文/新聞開始,過程中也會接觸到程式專有名詞,能試著自己詮釋加強概念。4月起主題,從SOLOLEARN平台做JavaScript篇章的翻譯。

■□■ Sep, Week 1 ■□■ Title: JavaScript Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1024

ECMAScript 6

ECMAScript 第6版 (也稱ES6,同為ES 2015)

ECMAScript (ES) is a scripting language specification created to standardize JavaScript.

ECMAScript(ES)是一種腳本語言規範(specification),用來將JavaScript標準化(standardize)。

The Sixth Edition, initially known as ECMAScript 6 (ES6) and later renamed to ECMAScript 2015, adds significant new syntax for writing complex applications, including classes and modules, iterators and for/of loops, generators, arrow functions, binary data, typed arrays, collections (maps, sets and weak maps), promises, number and math enhancements, reflection, and proxies.

在第6版,原來被稱為ECMAScript 6(ES6),後來被改名為ECMAScript 2015,增加了重要的(significant)新語法來撰寫複雜的應用程式,包含類別和模組(classes and modules)、迭代器和for及of迴圈(iterators and for/of loops)、產生器(generators)、箭頭函式(arrow functions)、二元資料(binary data)、型別陣列(typed arrays)、集合(collections,包含maps、sets和weak maps)、promises非同步語法、數字和數學增強(enhancements)、反射(reflection)以及代理(proxies)。

In other words, ES6 is a superset of JavaScript (ES5). The reason that ES6 became so popular is that it introduced new conventions and OOP concepts such as classes.

換句話說,ES6是JavaScript(ES5)的超進化版,ES6變得如此受歡迎的原因是它引入了新的公約(conventions)和物件導向程式設計(OOP,Object-oriented programming)概念,像是類別。

TIP:In this module, we cover the most important additions to ES6. So, let's jump right in!

提示:在這個單元,我們介紹ES6最重要的新增規範,那麼,我們立刻開始吧!

-----

var & let

var和let (關鍵字)

In ES6 we have three ways of declaring variables:

在ES6我們有3種方式宣告變數:

var a = 10;
const b = 'hello';
let c = true;

The type of declaration used depends on the necessary scopeScope is the fundamental concept in all programming languages that defines the visibility of a variable.

使用宣告的種類是根據需求的範圍(scope),範圍(Scope)是所有程式語言的核心觀念。它定義了變數的可見度。

var & let
Unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope, let allows you to declare variables that are limited in scope to the block, statement, or expression in which they are used.
For example:

var和let
不像var關鍵字會定義一個變數在全域範圍,或不管區塊範圍地定義在整個函式中,let只允許你宣告(declare)變數限制在他們被使用的區塊範圍、陳述式範圍或表達式範圍中。
例如:

if (true) {   let name = 'Jack'; } alert(name); //generates an error 產生錯誤訊息

In this case, the name variable is accessible only in the scope of the if statement because it was declared as let.

在這情境中,name變數只能在if陳述句的範圍中存取(所以在if之外用name會產生錯誤訊息),因為它是用 let 宣告的。

To demonstrate the difference in scope between var and let, consider this example:

要示範var和let不同的範圍(scope),參考這個範例:

function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable
console.log(x); // 2
}
console.log(x); // 2
}

function letTest() {
let x = 1;
if (true) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}

One of the best uses for let is in loops:

let最佳使用方式之一是用在迴圈中:

for (let i = 0; i < 3; i++) {
document.write(i);
}

Here, the i variable is accessible only within the scope of the for loop, where it is needed.

這裡,i變數只在for迴圈的範圍中可存取,正是它被需要的地方。

TIP:let is not subject to Variable Hoisting, which means that let declarations do not move to the top of the current execution context.

提示:let不受制於(subject to)變數提升(Variable Hoisting),表示說用let宣告不會將變數提升到當前執行內容的最上方。

-----

const

const (關鍵字)

const variables have the same scope as variables declared using let. The difference is that const variables are immutable - they are not allowed to be reassigned.
For example, the following generates an exception:

const變數跟使用let宣告的變數有一樣的範圍,差別在於const變數是不可變的(immutable),他們不允許被重新分配(reassigned)。
下面的範例會產生反駁(exception): (Uncaught TypeError: Assignment to constant variable.)

const ​a = 'Hello';
a = 'Bye'
TIP:const is not subject to Variable Hoisting too, which means that const declarations do not move to the top of the current execution context. Also note that ES6 code will run only in browsers that support it. Older devices and browsers that do not support ES6 will return a syntax error.

提示:const也不受制於變數提升,表示用const宣告不會將變數提升到當前執行內容的最上方。
也要注意ES6只會在有支援它的瀏覽器中運作,不支援ES6的較舊設備和瀏覽器會回傳語法錯誤。

-----

Template Literals in ES6

ES6的樣板字面值

Template literals are a way to output variables in the string.
Prior to ES6 we had to break the string, for example:

樣板字面值(template literals)是一種在字串中將變數印出的方式。
在ES6之前,我們需要中斷字串,例如:

let name = 'David';
let msg = 'Welcome ' + name + '!';
console.log(msg);

ES6 introduces a new way of outputting variable values in strings. The same code above can be rewritten as:

ES6引入在字串中印出變數值的全新方式,上方相同的程式碼可以改寫成:

let name = 'David';
let msg = `Welcome ${name}!`;
console.log(msg);

Notice, that template literals are enclosed by the backtick (` `) character instead of double or single quotes.
The ${expression} is a placeholder, and can include any expression, which will get evaluated and inserted into the template literal.

For example:

注意:樣板字面值(template)是被反引號 ‵ ‵ (backtick)包圍,而不是雙或單引號。${表達式}是一個佔位符(placeholder),可以包含任何表達式,他會被評估(get evaluated)並插入到樣板字面值中。
範例:

let a = 8;
let b = 34;
let msg = `The sum is ${a+b}`;
console.log(msg);
TIP:To escape a backtick in a template literal, put a backslash \ before the backtick.

提示:要跳脫樣板字面值的反引號,可以放入反斜線\在反引號之前。

-----

翻譯小心得| 我開始學習JS時就是ES6的標準了,很幸運有前人的耕耘,所以避免很多標準不同的陣痛,基礎的概念不成問題,期待後面更深入的介紹。 Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.

This free site is ad-supported. Learn more