MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

翻譯不完整。請協助 翻譯此英文文件

本章討論 JavaScript 的基本語法與基礎資料類型、包括變數、常數、字元常數

基礎知識

JavaScript 許多基本語法借鑒自 Java,但函數的用法、原型的繼承、正規表達亦受 Awk、Perl 和 Python 的影響。

JavaScript 是 Case-sensitive(區分大小寫)並使用 Unicode 編碼。

在 JavaScript 中,每行指令被稱為 Statements,並用分號(;)分隔。空格、Tab 與換行符號皆被視為空白。JavaScript 的文件會從左到右進行掃描,並轉換成一系列的元素,像是令牌(Token)、控制字符(Control characters)、換行器(line terminators)、註解(Comments)或是空白(Withespace),ECMAScript 也定義了特定的保留字和字面值,並在每個沒有加分號的 Statement 自動加上分號。然而,推薦的作法還是在每個 Statement 的結尾自行加上分號,以防止一些潛在的副作用,如果需要更多資訊,可以參考這篇

註解(Comments)

註解語法跟 C++ 和其他語言相同:

// a one line comment
 
/* this is a longer, 
   multi-line comments
 */
 
/* You can't, however, /* nest comments */ SyntaxError */

宣告(Declarations)

JavaScript有三種宣告方式

var
宣告一個可隨意更改其內容的變數
let
宣告一個可隨意更改其內容的區塊區域變數
const
宣告一個只可讀取的不可變常數

變數(Variables)

變數(variable)是對值(value)的引用,變數的名稱被稱為 identifiers 需要遵從一定的規則。

在 JavaScript 中,變數必須使用字母(letter)、下底線( _)、錢號($)作為開頭;後面的字員組成可以包含數字(0-9)。JavaScript 是區分大小寫(case secsitive)的,大寫字母('A' ~ 'Z')和小寫字母('a' ~ 'z')皆可使用且不相等。

You can use most of ISO 8859-1 or Unicode letters such as å and ü in identifiers (for more details see this blog post). You can also use the Unicode escape sequences as characters in identifiers.

Some examples of legal names are Number_hits, temp99, $credit, and _name.

定義變數

你可以透過三種方式來定義變數:

  • 透過保留字 var 來定義變數,舉例來說: var x = 42,這種方式可以用來定義區域以及全域變數。
  • 直接指定一個值給該變數,例如:x = 42,這種方式只能定義全域變數,如果在方法外面使用該方法定義變數,嚴格模式裡會產生警告,該定義方式應該盡可能避免。
  • 透過保留字 let,舉例來說:let y = 13let 可以用來定義區塊裡的區域變數。想瞭解更多,可以參考變數區域的章節。

變數取值

變數可以透過 var 或是 let 來定義,如果尚未指定數值給該變數,那麼該變數的值會是 undefined。如果嘗試去存取未定義的變數,會跳出 ReferenceError 的例外。

var a;
console.log('The value of a is ' + a); // The value of a is undefined

console.log('The value of b is ' + b); // The value of b is undefined
var b;

console.log('The value of c is ' + c); // Uncaught ReferenceError: c is not defined

let x;
console.log('The value of x is ' + x); // The value of x is undefined

console.log('The value of y is ' + y); // Uncaught ReferenceError: y is not defined
let y; 

你可以利用 undefined 來判斷該變數是否有值,在下面的程式碼的例子中,input 這個變數沒有賦值,if 判斷式會得到 true 的結果。

var input;
if (input === undefined) {
  doThis();
} else {
  doThat();
}

被賦予 undefined 的變數,在被當做布林值的情境下都會被視為 false,以下面的例子來說,程式碼會執行 myFunction,因為 myArrayundefined

var myArray = [];
if (!myArray[0]) myFunction(); 

被賦予 undefined 的變數,在和數值進行運算之後,會被轉成非數值(NaN):

var a;
a + 2;  // Evaluates to NaN

當你對 null 進行運算,null 會自動轉換成數值 0,如果當做布林值運算,會被當成 false,舉例來說:

var n = null;
console.log(n * 32); // Will log 0 to the console

變數範圍

When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.

JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.

if (true) {
  var x = 5;
}
console.log(x);  // x is 5

This behavior changes, when using the let declaration introduced in ECMAScript 2015.

if (true) {
  let y = 5;
}
console.log(y);  // ReferenceError: y is not defined

變數提升

Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting; variables in JavaScript are in a sense "hoisted" or lifted to the top of the function or statement. However, variables that are hoisted will return a value of undefined. So even if you declare and initialize after you use or refer to this variable, it will still return undefined.

/**
 * Example 1
 */
console.log(x === undefined); // true
var x = 3;

/**
 * Example 2
 */
// will return a value of undefined
var myvar = 'my value';
 
(function() {
  console.log(myvar); // undefined
  var myvar = 'local value';
})();

The above examples will be interpreted the same as:

/**
 * Example 1
 */
var x;
console.log(x === undefined); // true
x = 3;
 
/**
 * Example 2
 */
var myvar = 'my value';
 
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = 'local value';
})();

Because of hoisting, all var statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.

In ECMAScript 2015, let (const) will not hoist the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

console.log(x); // ReferenceError
let x = 3;

函式提升

For functions, only the function declaration gets hoisted to the top and not the function expression.

/* Function declaration */

foo(); // "bar"

function foo() {
  console.log('bar');
}


/* Function expression */

baz(); // TypeError: baz is not a function

var baz = function() {
  console.log('bar2');
};

Global variables

Global variables are in fact properties of the global object. In web pages the global object is window, so you can set and access global variables using the window.variable syntax.

Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared in a document, you can refer to this variable from an iframe as parent.phoneNumber.

Constants

You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign ($) and can contain alphabetic, numeric, or underscore characters.

const PI = 3.14;

A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.

The scope rules for constants are the same as those for let block-scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.

You cannot declare a constant with the same name as a function or variable in the same scope. For example:

// THIS WILL CAUSE AN ERROR
function f() {};
const f = 5;

// THIS WILL CAUSE AN ERROR ALSO
function f() {
  const g = 5;
  var g;

  //statements
}

However, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.

const MY_OBJECT = {'key': 'value'};
MY_OBJECT.key = 'otherValue';

資料結構及型別

Data types

The latest ECMAScript standard defines seven data types:

  • Six data types that are primitives:
    • Boolean. true and false.
    • null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.
    • undefined. A top-level property whose value is undefined.
    • Number. 42 or 3.14159.
    • String. "Howdy"
    • Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.
  • and Object

儘管這些變數關聯性很小, 他們可以讓你在你的應用程式中, 產生出有意義的函數. 

物件與 函數 在語言中是其它的基本元素. 你可以把物件想成是一個被命名過且用來裝數值的容器,以及函數則為你的應用程式所執行的步驟.  

資料型別轉換

JavaScript 是一個動態型別的語言,這意味著你不需要在宣告變數時定義它的資料型別,程式執行時會自動轉換,你可以用下面方式宣告變數:

var answer = 42;

你可以指派字串在同個變數中,例如:

answer = "Thanks for all the fish...";

由於 Javascript 是一個動態型別的語言,因此這樣的宣告方式不會導致錯誤。

在該陳述式中,它調用了字串和數字,並使用 + 進行運算,JavaScript 會自動把數字轉換成字串,例如:

x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"

在該陳述式中,它調用了其它運算子,JavaScript 就不會將數字轉換成字串,例如:

"37" - 7 // 30
"37" + 7 // "377"

字串轉數值

In the case that a value representing a number is in memory as a string, there are methods for conversion.

parseInt will only return whole numbers, so its use is diminished for decimals. Additionally, a best practice for parseInt is to always include the radix parameter. The radix parameter is used to specify which numerical system is to be used.

An alternative method of retrieving a number from a string is with the + (unary plus) operator:

'1.1' + '1.1' = '1.11.1'
(+'1.1') + (+'1.1') = 2.2   
// Note: the parentheses are added for clarity, not required.

字面值(Literals)

You use literals to represent values in JavaScript. These are fixed values, not variables, that you literally provide in your script. This section describes the following types of literals:

陣列字面值

An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]). When you create an array using an array literal, it is initialized with the specified values as its elements, and its length is set to the number of arguments specified.

The following example creates the coffees array with three elements and a length of three:

var coffees = ['French Roast', 'Colombian', 'Kona'];

Note : An array literal is a type of object initializer. See Using Object Initializers.

If an array is created using a literal in a top-level script, JavaScript interprets the array each time it evaluates the expression containing the array literal. In addition, a literal used in a function is created each time the function is called.

Array literals are also Array objects. See Array and Indexed collections for details on Array objects.

Extra commas in array literals

You do not have to specify all elements in an array literal. If you put two commas in a row, the array is created with undefined for the unspecified elements. The following example creates the fish array:

var fish = ['Lion', , 'Angel'];

This array has two elements with values and one empty element (fish[0] is "Lion", fish[1] is undefined, and fish[2] is "Angel").

If you include a trailing comma at the end of the list of elements, the comma is ignored. In the following example, the length of the array is three. There is no myList[3]. All other commas in the list indicate a new element.

Note : Trailing commas can create errors in older browser versions and it is a best practice to remove them.

var myList = ['home', , 'school', ];

In the following example, the length of the array is four, and myList[0] and myList[2] are missing.

var myList = [ ,'home', , 'school'];

In the following example, the length of the array is four, and myList[1] and myList[3] are missing. Only the last comma is ignored.

var myList = ['home', , 'school', , ];

Understanding the behavior of extra commas is important to understanding JavaScript as a language, however when writing your own code: explicitly declaring the missing elements as undefined will increase your code's clarity and maintainability.

Boolean literals

The Boolean type has two literal values: true and false.

Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object. The Boolean object is a wrapper around the primitive Boolean data type. See Boolean for more information.

Integers

Integers can be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8) and binary (base 2).

  • Decimal integer literal consists of a sequence of digits without a leading 0 (zero).
  • Leading 0 (zero) on an integer literal, or leading 0o (or 0O) indicates it is in octal. Octal integers can include only the digits 0-7.
  • Leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F.
  • Leading 0b (or 0B) indicates binary. Binary integers can include digits only 0 and 1.

Some examples of integer literals are:

0, 117 and -345 (decimal, base 10)
015, 0001 and -0o77 (octal, base 8) 
0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
0b11, 0b0011 and -0b11 (binary, base 2)

For more information, see Numeric literals in the Lexical grammar reference.

Floating-point literals

A floating-point literal can have the following parts:

  • A decimal integer which can be signed (preceded by "+" or "-"),
  • A decimal point ("."),
  • A fraction (another decimal number),
  • An exponent.

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point of "e" (or "E").

More succinctly, the syntax is:

[(+|-)][digits][.digits][(E|e)[(+|-)]digits]

For example:

3.1415926
-.123456789
-3.1E+12
.1e-23

Object literals

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). You should not use an object literal at the beginning of a statement. This will lead to an error or not behave as you expect, because the { will be interpreted as the beginning of a block.

The following is an example of an object literal. The first element of the car object defines a property, myCar, and assigns to it a new string, "Saturn"; the second element, the getCar property, is immediately assigned the result of invoking the function (carTypes("Honda")); the third element, the special property, uses an existing variable (sales).

var sales = 'Toyota';

function carTypes(name) {
  if (name === 'Honda') {
    return name;
  } else {
    return "Sorry, we don't sell " + name + ".";
  }
}

var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };

console.log(car.myCar);   // Saturn
console.log(car.getCar);  // Honda
console.log(car.special); // Toyota 

Additionally, you can use a numeric or string literal for the name of a property or nest an object inside another. The following example uses these options.

var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda

Object property names can be any string, including the empty string. If the property name would not be a valid JavaScript identifier or number, it must be enclosed in quotes. Property names that are not valid identifiers also cannot be accessed as a dot (.) property, but can be accessed and set with the array-like notation("[]").

var unusualPropertyNames = {
  '': 'An empty string',
  '!': 'Bang!'
}
console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
console.log(unusualPropertyNames['']);  // An empty string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
console.log(unusualPropertyNames['!']); // Bang!

Enhanced Object literals

In ES2015, object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return 'd ' + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Please note:

var foo = {a: 'alpha', 2: 'two'};
console.log(foo.a);    // alpha
console.log(foo[2]);   // two
//console.log(foo.2);  // Error: missing ) after argument list
//console.log(foo[a]); // Error: a is not defined
console.log(foo['a']); // alpha
console.log(foo['2']); // two

RegExp literals

A regex literal is a pattern enclosed between slashes. The following is an example of an regex literal.

var re = /ab+c/;

String literals

A string literal is zero or more characters enclosed in double (") or single (') quotation marks. A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks. The following are examples of string literals:

'foo'
"bar"
'1234'
'one line \n another line'
"John's cat"

You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the String.length property with a string literal:

console.log("John's cat".length) 
// Will print the number of symbols in the string including whitespace. 
// In this case, 10.

In ES2015, template literals are also available. Template literals are enclosed by the back-tick (` `)  (grave accent) character instead of double or single quotes. Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript template strings can run
 over multiple lines, but double and single
 quoted strings cannot.`

// String interpolation
var name = 'Bob', time = 'today';
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

You should use string literals unless you specifically need to use a String object. See String for details on String objects.

Using special characters in strings

In addition to ordinary characters, you can also include special characters in strings, as shown in the following example.

'one line \n another line'

The following table lists the special characters that you can use in JavaScript strings.

Table: JavaScript special characters
Character Meaning
\0 Null Byte
\b Backspace
\f Form feed
\n New line
\r Carriage return
\t Tab
\v Vertical tab
\' Apostrophe or single quote
\" Double quote
\\ Backslash character
\XXX The character with the Latin-1 encoding specified by up to three octal digits XXX between 0 and 377. For example, \251 is the octal sequence for the copyright symbol.
\xXX The character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol.
\uXXXX The Unicode character specified by the four hexadecimal digits XXXX. For example, \u00A9 is the Unicode sequence for the copyright symbol. See Unicode escape sequences.
\u{XXXXX} Unicode code point escapes. For example, \u{2F804} is the same as the simple Unicode escapes \uD87E\uDC04.

Escaping characters

For characters not listed in the table, a preceding backslash is ignored, but this usage is deprecated and should be avoided.

You can insert a quotation mark inside a string by preceding it with a backslash. This is known as escaping the quotation mark. For example:

var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
console.log(quote);

The result of this would be:

He read "The Cremation of Sam McGee" by R.W. Service.

To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path c:\temp to a string, use the following:

var home = 'c:\\temp';

You can also escape line breaks by preceding them with backslash. The backslash and line break are both removed from the value of the string.

var str = 'this string \
is broken \
across multiple \
lines.'
console.log(str);   // this string is broken across multiplelines.

Although JavaScript does not have "heredoc" syntax, you can get close by adding a line break escape and an escaped line break at the end of each line:

var poem = 
'Roses are red,\n\
Violets are blue.\n\
Sugar is sweet,\n\
and so is foo.'

ECMAScript 2015 introduces a new type of literal, namely template literals. This allows for many new features including multiline strings!

var poem = 
`Roses are red, 
Violets are blue. 
Sugar is sweet, 
and so is foo.` 

More information

This chapter focuses on basic syntax for declarations and types. To learn more about JavaScript's language constructs, see also the following chapters in this guide:

In the next chapter, we will have a look at control flow constructs and error handling.

文件標籤與貢獻者

標籤: 
 最近更新: jackblackevo,