Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

В цьому розділі розглядаються основи розмітки JavaScript, оголошення змінних, типи даних і літерали.

Основи

Більшість свого синтаксису JavaScript запозичив у Java, вплинули також Awk, Perl і Python.

JavaScript чутливий до регістру і використовує набір символів Unicode.

В JavaScript інструкції називаються statements і розділяються крапкою з комою (;). Символи пробілів (space), табуляції (tab) і переходів на новий рядок (newline) називаються пробільними символами (whitespace). Вихідний код JavaScript скриптів сканується зліва направо та конвертується в послідовність ввідних елементів, що є токенами (tokens), керуючих символів, символів нового рядка, коментарів і пробільних символів. ECMAScript також визначає певні ключові слова, літерали і правила для автоматичного вставляння крапки з комою (ASI) в кінці інструкцій (statements). Проте, рекомендується завжди додавати крапку з комою в кінці інструкцій - це допоможе уникнути побічних ефектів. Для більш точної інформації перегляньте посилання про лексичний синтаксис (lexical grammar) JavaScript.

Коментарі

Синтаксис коментарів такий самий як в C++ та багатьох інших мовах програмування:

// коментар для одного рядка
 
/* довгий коментар
   на кілька рядків
 */
 
/* Однак, не можна /* змішувати коментарі */ SyntaxError */

Оголошення

Існує три види оголошень в JavaScript.

var
Оголошення змінної. Присвоєння значення - необов'язкове.
let
Оголошує локальну змінну в області видимості блоку. Присвоєння значення - необов'язкове.
const
Оголошує константу, доступну тільки для зчитування.

Змінні

Ви використовуєте змінні як символічні імена для значень у вашій програмі. Ім'я змінної ще називаєть ідентифікатор. Ім'я змінної має відповідати певним вимогам.

Ідентифікатори JavaScript повинні починатися з літери, знаку підкреслення (_), або знаку долару ($); наступні символи можуть також бути цифрами (0-9). Оскільки JavaScript чутливий до регістру, літери включають у себе символи від "A" до "Z" (у верхньому регістрі) та символи від  "a" до "z" (у нижньому регістрі).

Ви можете використовувати літери у кодувані ISO 8859-1 або Unicode такі як å та ü у ідентифікаторах. Ви також можете використовувати escape-послідовності Unicode у якості символів у ідентифіторах.

Деякі приклади допустимих назв - Number_hits, temp99, та _name.

Оголошення змінних

Змінні можна оголошувати трьома способами:

  • За допомогою ключого слова var. Наприклад,var x = 42. Цей синтаксис може бути використаний для оголошення як локальних, так і глобальних змінних.
  • Просто призначивши змінній значення. Наприклад, x = 42. Так завжди оголошується глобальна змінна, якщо вона оголошена поза будь-якою функцією. Цей спосіб генерує жорстке попередження JavaScript. Ви не повинні використовувати цей варіант.
  • З ключовим словом let. Наприклад, let y = 13. Цей синтаксис може бути використаний для оголошення локальної змінної у області видимості. Дивись Область видимості нижче.

Значення змінних

Змінна, оголошена ключовими словами var або let , без початкового значення має значення undefined.

Спроба доступу до неоголошеної змінної призведе до виникнення помилки (винятку) ReferenceError:

var a;
console.log("The value of a is " + a); // logs "The value of a is undefined"
console.log("The value of b is " + b); // throws ReferenceError exception

Можна використати undefined, щоб з'ясувати, чи має змінна значення. У наступному коді змінній input не присвоюється значення, і умова в операторі if набуває значення true.

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

Значення undefined поводить себе як false , коли використовується у логічному контексті. Наприклад, наступний код виконує функцію myFunction, оскільки елемент myArray невизначений:

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

Області видимості

Коли ви оголошуєте змінну за межами будь-якої функції, вона називається глобальною змінною, оскільки вона доступна для будь-якого іншого коду в поточному документі. Коли ви оголошуєте змінну в межах функції, вона називається локальною змінною, оскільки вона доступна лише в межах цієї функції.

JavaScript перед ECMAScript 6 не має області блокових операторів; вірніше, змінна, оголошена у блокові, є локальною для функції, у якій знаходиться цей блок (або глобальною змінною, якщо блок поза функціями у скрипті). Для прикладу розглянемо код, який буде записувати  5, тому, що область видимості змінної x - функція (або глобальинй контекст), у якій оголошена функція x, а не блок оператора if.

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

Ця поведінка змінюється при використанні ключового слова let, введенного в ECMAScript 6.

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

Здіймання змінних

Ще однією особливістю змінних в JavaScript є те, що ви можете послатися на змінну, яку в коді оголошено пізніше, і це не призведе до винятку. Ця концепція має назву здіймання; змінні у JavaScript в певному сенсі "підняті" на вершину функції або твердження у коді. Проте змінні, які підіймаються, повертають значення undefined. Таким чином, навіть якщо ви огосите та ініціалізуєте значення змінної, після використання або посилання на цю змінну, вона все одно поверне невизначене значення.

/**
 * Example 1
 */
console.log(x === undefined); // logs "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";
})();

Наведені вище приклади будуть тлумачитися так само, як:

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

Враховуючи здіймання, всі вирази var всепредині функції повинні знаходитись якомога ближче до вершини функції. Це найкраща практика, щоб підвищити чіткість коду.

Глобальні змінні

Глобальні змінні фактично є властивостями глобальних об'єктів. На веб-сторінках глобальним об'єктом є window, тому ви можете встановлювати та отримувати доступ до глобальних змінних за допомогою синтаксису window.variable.

Отже, ви можете отримати доступ до глобальних змінних оголошених в одному вікні або фреймі з іншого вікна або фрейму, вказавши при цьому ім'я цього вікна або фрейму. Наприклад, якщо в документі оголошена змінна під назвою phoneNumber, ви можете звернутися до неї з фрейму parent.phoneNumber.

Константи

Ви можете створити константу з іменем, призначену лише для зчитування, для цього використовується ключове слово const. Синтаксис ідентифікатора константи такий же, як і синтаксис ідентифікатора змінної: він повинен починатися з літери, підкреслення або знака долара та може містити букви, цифри, символи підкреслення.

const prefix = '212';

Константа не може змінювати значення за допомогою присвоювання або повторно оголошуватися під час запуску скрипта. Вона повинна бути ініціалізована до свого виклику в програмі.

Правила області для констант такі ж, як і для let змінних областей блоку. Якщо ключове слово const опущено, передбачається, що ідентифікатор представляє змінну.

Ви не можете оголосити константу з тим же ім'ям, що і функція або змінна в тій самій області. Наприклад:

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

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

  //statements
}

Структури та типи даних

Типи даних

Останній стандарт ECMAScript визначає наступні сім типів даних:

  • Шість типів даних, які є primitives:
    • Boolean. true і false.
    • null. Спеціальне ключове слово, що позначає нульова значення. Оскільки JavaScript є чутливим до регістру, null це не те ж саме, що й Null, NULL чи інший варіант.
    • undefined. Властивість верхнього рівня, значення якої не визначено.
    • Number. 42 чи 3.14159.
    • String. "Howdy"
    • Symbol (нове в ECMAScript 6). Тип даних, екземпляри якого унікальні та незмінні.
  • та Object

Хоча цих типів даних і небагато, вони дозволяють виконувати корисні функції з додатками. Objects та functions - інші основні елементи мови. Ви можете думати про об'єкти, як про іменовані контейнери для змінних, що функціонують як процедури, які може виконувати ваша програма.

Перетворення типу даних

JavaScript - це dynamically typed мова програмування. Це означає, що вам не потрібно вказувати тип даних змінної, коли ви її оголошуєте. Типи даних автоматично конвертуються, коли це необхідно, під час виконання скрипта. Наприклад, ви можете визначити змінну таким чином:

var answer = 42;

А пізніше цій же змінній можна присвоїти значення рядкового типу даних, наприклад:

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

Оскільки JavaScript є dynamically typed, таке присвоєння не викликає повідомлення про помилку.

У виразах, що містять числові і рядкові значення з оператором +, 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"

Перетворення рядків у числа

У випадку, коли значення, що представляє число, знаходиться в пам'яті як рядок, існують методи для перетворення.

parseInt повертає тільки цілі числа, тому його використання обмежується десятковими знаками. Окрім того, найкращою практикою для parseInt завжди є включення параметра radix. Параметр radix використовується для визначення чисельної системи, яка буде використовуватися.

Альтернативним способом отримання числа з рядка є оператор + (одинарний плюс):

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

Літерали

Для представлення значень у JavaScript використовуються літерали. Це фіксовані значення, а не змінні, які ви буквально надаєте у вашому скрипті. У цьому розділі описані наступні типи літералів:

Масивні літерали

Масив літералів, це список від нуля та більше, кожен з елеменів якого представляє елемент масиву, вкладений у квадратні дужки ([]). Коли ви створюєте масив використовуючи літерал масиву, він ініциалізується зі вказаним значенням, як її елемент, а його довжина залежить від кількості вказаних аргументів.

Наступний приклад показує створення  coffees масиву з трьох елементів, та довжиною в три:

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

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

Якщо масив створюється за допомогою літералів у скрипті верхнього рівня, JavaScript інтерпретує масив кожного разу, коли він оцінює вираз, що містить літераль масиву. На додаток, літераль використовується у функції та створюється кожного разу коли викликається функція.

Крім масивів літералів є ще  Array objects (масиви об`єктів). Дивись Array та Indexed collections та більши детально про Array objects.

Додаткові коми в масивах літералів

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.

Булеві літерали

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.

Деякі приклади цілочисельних літералів:

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.

Літерали з плаваючою комою

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 or "e" (or "E").

More succinctly, the syntax is:

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

For example:

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

Об'єктні літерали

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!

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/;

Рядкові літерали

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 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 this is
 not legal.`

// 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.

Видалення символів

Для символів, не перелічених у таблиці, попередній зворотній слеш ігнорується, але це використання застаріло і його слід уникати.

Ви можете вставити лапки всередині рядка, попередньо накладаючи зворотну косу риску. Це називають уникнення лапок. Наприклад:

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

Результатом цього буде:

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 linebreak escape and an escaped linebreak at the end of each line:

var poem = 
"Roses are red,\n\
Violets are blue.\n\
I'm schizophrenic,\n\
And so am I."

Більше інформації

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:

В наступному розділі, ми розглянемо конструкції потоків та обробку помилок.

Мітки документа й учасники

Зробили внесок у цю сторінку: olegsava, s5t8e9r1n, PavloEleva, mdnwebdocs-bot, oleksii-lyzun, OlexandrIlchenko, ivaskonyan, OlkaA, yuraantonov, Andriy-K
Востаннє оновлена: olegsava,