Skip to content

Commit c2560d2

Browse files
authored
JavaScript specials (#37)
feat: javascript-specials translation
1 parent 6ded928 commit c2560d2

File tree

1 file changed

+97
-94
lines changed
  • 1-js/02-first-steps/16-javascript-specials

1 file changed

+97
-94
lines changed
Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,122 @@
1-
# JavaScript specials
1+
# JavaScript 特性
22

3-
This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments.
3+
本章節簡要的回顧一下我們到目前為止所學的,並特別著重在一些細節上。
44

5-
## Code structure
5+
## 程式碼結構
66

7-
Statements are delimited with a semicolon:
7+
8+
述語(Statements)用分號隔開:
89

910
```js run no-beautify
1011
alert('Hello'); alert('World');
1112
```
1213

13-
Usually, a line-break is also treated as a delimiter, so that would also work:
14+
通常,換行符號也被視為分隔符號, 因此也能這樣分隔述語:
1415

1516
```js run no-beautify
1617
alert('Hello')
1718
alert('World')
1819
```
1920

20-
That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance:
21+
這是所謂的 "自動分號插入"。但有時它不起作用,例如:
2122

2223
```js run
2324
alert("There will be an error after this message")
2425

2526
[1, 2].forEach(alert)
2627
```
2728

28-
Most codestyle guides agree that we should put a semicolon after each statement.
29+
大多數程式碼風格指南都認為我們應該在每個述語後加上分號。
2930

30-
Semicolons are not required after code blocks `{...}` and syntax constructs with them like loops:
31+
在像是程式碼區塊和迴圈之類,有用到 `{...}` 的語法之後,不需要加上分號:
3132

3233
```js
3334
function f() {
34-
// no semicolon needed after function declaration
35+
// 函數宣告後不需要分號
3536
}
3637

3738
for(;;) {
38-
// no semicolon needed after the loop
39+
// 迴圈述語後不需要分號
3940
}
4041
```
4142

42-
...But even if we can put an "extra" semicolon somewhere, that's not an error. It will be ignored.
43+
...但即使我們在某處放了 "額外" 的分號,這也不會造成錯誤。它會被忽略。
44+
45+
更多資訊: <info:structure>
4346

44-
More in: <info:structure>.
4547

46-
## Strict mode
48+
## 嚴格模式(Strict mode
4749

48-
To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`.
50+
為了完全啟用現代 JavaScript 的所有功能,我們應該以 `"use strict"` 指令作為腳本開頭。
4951

5052
```js
5153
'use strict';
5254

5355
...
5456
```
5557

56-
The directive must be at the top of a script or at the beginning of a function body.
58+
該指令必須放在 JavaScript 腳本的頂部或是函數的開頭。
5759

58-
Without `"use strict"`, everything still works, but some features behave in the old-fashion, "compatible" way. We'd generally prefer the modern behavior.
60+
沒有使用 `"use strict"`,一切依然能正常運行,但是某些特性會以 "兼容" 舊式的方式表現,我們通常偏好使用現代的方式。
5961

60-
Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly.
62+
語言內有些現代功能與特性(像是我們將來要學的類別)會隱式地啟用嚴格模式。
6163

62-
More in: <info:strict-mode>.
64+
更多資訊: <info:strict-mode>.
6365

64-
## Variables
66+
## 變數(Variables
6567

66-
Can be declared using:
68+
可以用下列方式聲明變數:
6769

6870
- `let`
69-
- `const` (constant, can't be changed)
70-
- `var` (old-style, will see later)
71+
- `const` (常數,宣告後不可改變)
72+
- `var` (舊的寫法,稍後會看到)
7173

72-
A variable name can include:
73-
- Letters and digits, but the first character may not be a digit.
74-
- Characters `$` and `_` are normal, on par with letters.
75-
- Non-Latin alphabets and hieroglyphs are also allowed, but commonly not used.
74+
一個變數名稱可以包含:
75+
- 字母與數字,但變數名的第一個字元不能是數字。
76+
- 字元 `$` `_` 是允許且正常的,用法同字母。
77+
- 非拉丁字母與象形文字也是允許的,但通常不會使用。
7678

77-
Variables are dynamically typed. They can store any value:
79+
變數是會動態被賦予型別的,他們可以儲存任何的值:
7880

7981
```js
8082
let x = 5;
8183
x = "John";
8284
```
8385

84-
There are 7 data types:
86+
有 7 種資料類型:
87+
88+
- `number` 可以是浮點數或是整數。
89+
- `string` 字串類型。
90+
- `boolean` 表達邏輯的值: `true/false`
91+
- `null` -- 具有單一值 `null` 的類型,代表 "空的" 或 "不存在"。
92+
- `undefined` -- 具有單一值 `undefined` 的類型,代表 "未指定"。
93+
- `object``symbol` -- 用於複雜的資料結構和唯一識別符號,我們還沒學習這個類型。
8594

86-
- `number` for both floating-point and integer numbers,
87-
- `string` for strings,
88-
- `boolean` for logical values: `true/false`,
89-
- `null` -- a type with a single value `null`, meaning "empty" or "does not exist",
90-
- `undefined` -- a type with a single value `undefined`, meaning "not assigned",
91-
- `object` and `symbol` -- for complex data structures and unique identifiers, we haven't learnt them yet.
95+
`typeof` 運算子會回傳值的類型,但有兩個例外:
9296

93-
The `typeof` operator returns the type for a value, with two exceptions:
9497
```js
95-
typeof null == "object" // error in the language
96-
typeof function(){} == "function" // functions are treated specially
98+
typeof null == "object" // 語言本身的錯誤
99+
typeof function(){} == "function" // 函式被特別對待
97100
```
98101

99-
More in: <info:variables> and <info:types>.
102+
更多資訊: <info:variables> <info:types>
100103

101-
## Interaction
104+
## 互動(Interaction
102105

103-
We're using a browser as a working environment, so basic UI functions will be:
106+
我們使用瀏覽器作為工作環境,所以基本的 UI 功能會是:
104107

105108
[`prompt(question, [default])`](mdn:api/Window/prompt)
106-
: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel".
109+
: 詢問一個 `question`,並回傳使用者輸入的內容,若使用者按下 "取消",則回傳 `null`
107110

108111
[`confirm(question)`](mdn:api/Window/confirm)
109-
: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
112+
: 詢問一個 `question`,並提供在 Ok Cancel 間進行選擇。選擇結果以 `true/false` 回傳。
110113

111114
[`alert(message)`](mdn:api/Window/alert)
112-
: Output a `message`.
115+
: 輸出一個 `message`
113116

114-
All these functions are *modal*, they pause the code execution and prevent the visitor from interacting with the page until they answer.
117+
所有這些函式都是 *模態*,他們會暫停程式碼執行並阻擋使用者與頁面互動,直到使用者回應模態。
115118

116-
For instance:
119+
舉例來說:
117120

118121
```js run
119122
let userName = prompt("Your name?", "Alice");
@@ -123,58 +126,58 @@ alert( "Visitor: " + userName ); // Alice
123126
alert( "Tea wanted: " + isTeaWanted ); // true
124127
```
125128

126-
More in: <info:alert-prompt-confirm>.
129+
更多資訊: <info:alert-prompt-confirm>.
127130

128-
## Operators
131+
## 運算子(Operators
129132

130-
JavaScript supports the following operators:
133+
JavaScript 支援以下運算子:
131134

132-
Arithmetical
133-
: Regular: `* + - /`, also `%` for the remainder and `**` for power of a number.
135+
算術運算子(Arithmetical
136+
: 常規的運算子如: `* + - /`,以及取餘數操作的 `%` 和次方運算的 `**`
134137

135-
The binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too:
138+
二元加號 `+` 連結字串。如果任何一個操作運算元是字串,則另一個也會被轉換成字串:
136139

137140
```js run
138141
alert( '1' + 2 ); // '12', string
139142
alert( 1 + '2' ); // '12', string
140143
```
141144

142-
Assignments
143-
: There is a simple assignment: `a = b` and combined ones like `a *= 2`.
145+
指定運算子(Assignments
146+
: 簡單的指定: `a = b` 和結合其他運算的指定運算 `a *= 2`
144147

145-
Bitwise
146-
: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators) when they are needed.
148+
位元操作(Bitwise
149+
: 位元操作在最底層的位元層面使用 32-bit 整數: 有需要時,請參閱 [docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators)
147150

148-
Conditional
149-
: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
151+
條件運算(Conditional
152+
: 唯一具有三個參數的操作: `cond ? resultA : resultB`. 如果 `cond` 是真值,則回傳 `resultA`否則回傳 `resultB`
150153

151-
Logical operators
152-
: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped (not necessary `true`/`false`). Logical NOT `!` converts the operand to boolean type and returns the inverse value.
154+
邏輯運算子(Logical operators
155+
: 邏輯的 AND `&&` OR `||` 執行短路核定,然後回傳停止時的值(不一定為 `true`/`false`)。邏輯的 NOT `!` 轉換操作運算元成布林類型,並回傳相反的值。
153156

154-
Comparisons
155-
: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal:
157+
比較運算子(Comparisons
158+
: 相等性檢查 `==` 將不同類型的值轉換成數值(除了 `null` `undefined`,它們除了彼此相等外,不跟任何人相等),所以這些是相等的:
156159

157160
```js run
158161
alert( 0 == false ); // true
159162
alert( 0 == '' ); // true
160163
```
161164

162-
Other comparisons convert to a number as well.
165+
其他的比較也會轉換成數值。
163166

164-
The strict equality operator `===` doesn't do the conversion: different types always mean different values for it.
167+
嚴格相等運算子 `===` 不會進行轉換:不同類型永遠代表不同的值。
165168

166-
Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else.
169+
`null` `undefined` 值比較特殊:他們只在 `==` 下相等。
167170

168-
Greater/less comparisons compare strings character-by-character, other types are converted to a number.
171+
大於/小於 的比較運算,在比較字串時,是按照字元逐一比較,其他類型則會先轉換成數值。
169172

170-
Other operators
171-
: There are few others, like a comma operator.
173+
其他運算子
174+
: 有一些其他的運算子,像是逗號運算子。
172175

173-
More in: <info:operators>, <info:comparison>, <info:logical-operators>.
176+
更多資訊: <info:operators>, <info:comparison>, <info:logical-operators>.
174177

175-
## Loops
178+
## 迴圈
176179

177-
- We covered 3 types of loops:
180+
- 我們介紹了三種類型的迴圈:
178181

179182
```js
180183
// 1
@@ -193,25 +196,25 @@ More in: <info:operators>, <info:comparison>, <info:logical-operators>.
193196
}
194197
```
195198

196-
- The variable declared in `for(let...)` loop is visible only inside the loop. But we can also omit `let` and reuse an existing variable.
197-
- Directives `break/continue` allow to exit the whole loop/current iteration. Use labels to break nested loops.
199+
- `for(let...)` 迴圈中宣告的變數其作用域只在迴圈中但我們也能省略 `let` 並重用現有的變數。
200+
- 指令 `break/continue` 允許退出整個 迴圈/當前迭代。使用標籤來打破巢狀迴圈。
198201

199-
Details in: <info:while-for>.
202+
更多資訊: <info:while-for>
200203

201-
Later we'll study more types of loops to deal with objects.
204+
稍後我們將會學習更多類型的迴圈來處理物件。
202205

203-
## The "switch" construct
206+
## "switch" 結構
204207

205-
The "switch" construct can replace multiple `if` checks. It uses `===` (strict equality) for comparisons.
208+
"switch" 結構可以取代多個 `if` 檢查。 它使用 `===` (嚴格相等) 進行比較。
206209

207-
For instance:
210+
例如:
208211

209212
```js run
210213
let age = prompt('Your age?', 18);
211214
212215
switch (age) {
213216
case 18:
214-
alert("Won't work"); // the result of prompt is a string, not a number
217+
alert("Won't work"); // 提示的結果是一個字串,而非數字
215218
216219
case "18":
217220
alert("This works!");
@@ -222,13 +225,13 @@ switch (age) {
222225
}
223226
```
224227

225-
Details in: <info:switch>.
228+
更多資訊: <info:switch>
226229

227-
## Functions
230+
## 函式
228231

229-
We covered three ways to create a function in JavaScript:
232+
我們介紹了三種在 JavaScript 中創建函式的方式:
230233

231-
1. Function Declaration: the function in the main code flow
234+
1. 函式宣告: 主要程式流程中的函示
232235

233236
```js
234237
function sum(a, b) {
@@ -238,7 +241,7 @@ We covered three ways to create a function in JavaScript:
238241
}
239242
```
240243

241-
2. Function Expression: the function in the context of an expression
244+
2. 函式表達式: 表達式上下文中的函式
242245

243246
```js
244247
let sum = function(a, b) {
@@ -248,32 +251,32 @@ We covered three ways to create a function in JavaScript:
248251
};
249252
```
250253

251-
3. Arrow functions:
254+
3. 箭頭函式:
252255

253256
```js
254-
// expression at the right side
257+
// 表達式在右邊
255258
let sum = (a, b) => a + b;
256259
257-
// or multi-line syntax with { ... }, need return here:
260+
// 或是帶有 { ... } 的多行語法,需要回傳:
258261
let sum = (a, b) => {
259262
// ...
260263
return a + b;
261264
}
262265
263-
// without arguments
266+
// 沒有引數
264267
let sayHi = () => alert("Hello");
265268
266-
// with a single argument
269+
// 單一引數
267270
let double = n => n * 2;
268271
```
269272

270273

271-
- Functions may have local variables: those declared inside its body. Such variables are only visible inside the function.
272-
- Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
273-
- Functions always return something. If there's no `return` statement, then the result is `undefined`.
274+
- 函式可能有區域變數: 那些在函式內宣告的變數。 這類的變數其作用域只存在函式內部。
275+
- 參數可以有預設值:`function sum(a = 1, b = 2) {...}`
276+
- 函式永遠會回傳一些東西。如果沒有 `return` 述語,則其結果為 `undefined`
274277

275-
Details: see <info:function-basics>, <info:function-expressions-arrows>.
278+
更多資訊:參見 <info:function-basics><info:function-expressions-arrows>
276279

277-
## More to come
280+
## 還有更多
278281

279-
That was a brief list of JavaScript features. As of now we've studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript.
282+
這是 JavaScript 特性的簡短概要。 截至目前,我們只學習了基礎知識。隨著教程的深入,你將會學習到 JavaScript 的更多特性與進階功能。

0 commit comments

Comments
 (0)