Как ввести значение в javascript

Переменные — место хранения необходимой информации

После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.

Инструменты, которые вам нужны

В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).

Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.

Что такое переменные?

Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:

button>Нажми на меняbutton> 

const button = document.querySelector("button"); button.onclick = function ()  let name = prompt("Как вас зовут?"); alert("Привет " + name + ", рады видеть вас!"); >; 

В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.

Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:

var name = prompt('Как вас зовут?'); if (name === 'Адам') < alert('Привет, Адам, рады тебя видеть!'); >else if (name === 'Алан') < alert('Привет, Алан, рады тебя видеть!'); >else if (name === 'Белла') < alert('Привет, Белла, рады тебя видеть!'); >else if (name === 'Бьянка') < alert('Привет, Бьянка, рады тебя видеть!'); >else if (name === 'Крис') < alert('Привет, Крис, рады тебя видеть!'); >// . и так далее .

Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырёх вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.

Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.

Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..

Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.

Объявление переменной

Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:

var myName; var myAge; 

Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.

doctype html> html> head> meta charset="utf-8" /> title>JavaScript consoletitle> style> *  box-sizing: border-box; > html  background-color: #0c323d; color: #809089; font-family: monospace; > body  max-width: 700px; > p  margin: 0; width: 1%; padding: 0 1%; font-size: 16px; line-height: 1.5; float: left; > .input p  margin-right: 1%; > .output p  width: 100%; > .input input  width: 96%; float: left; border: none; font-size: 16px; line-height: 1.5; font-family: monospace; padding: 0; background: #0c323d; color: #809089; > div  clear: both; > style> head> body>body> script> var geval = eval; function createInput()  var inputDiv = document.createElement("div"); var inputPara = document.createElement("p"); var inputForm = document.createElement("input"); inputDiv.setAttribute("class", "input"); inputPara.textContent = ">"; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); if (document.querySelectorAll("div").length > 1)  inputForm.focus(); > inputForm.addEventListener("change", executeCode); > function executeCode(e)  try  var result = geval(e.target.value); > catch (e)  var result = "error — " + e.message; > var outputDiv = document.createElement("div"); var outputPara = document.createElement("p"); outputDiv.setAttribute("class", "output"); outputPara.textContent = "Result: " + result; outputDiv.appendChild(outputPara); document.body.appendChild(outputDiv); e.target.disabled = true; e.target.parentNode.style.opacity = "0.5"; createInput(); > createInput(); script> html> 

Примечание: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) — ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.

Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.

; myAge; 

В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение undefined . Если они не существуют, вы получите сообщение об ошибке — попробуйте сейчас ввести в консоли имя переменной ниже:

Примечание: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует — это разные вещи.

Присвоение значения переменной

Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства ( = ), а за ним значение, которое вы хотите присвоить. Например:

= "Chris"; myAge = 37; 

Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:

; myAge; 

Вы можете объявить переменную и задать ей значение одновременно:

var myName = "Chris"; 

Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.

Примечание: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она всё равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется hoisting — прочитайте var hoisting для более подробной информации по этому вопросу.

Обновление переменной

Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:

= "Bob"; myAge = 40; 

Правила именования переменных

Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчёркивания.

• Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.
• Не используйте символы подчёркивания в начале имён переменных — это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.
• Не используйте числа в начале переменных. Это недопустимо и приведёт к ошибке.
• Общепринято придерживаться так называемый «lower camel case», где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имён переменных в этой статье.
• Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.
• Переменные чувствительны к регистру, так что myage и myAge — разные переменные.
• И последнее — вам также нужно избегать использования зарезервированных слов JavaScript в качестве имён переменных — под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа var , function , let , и for для имён переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.

Примечание: По ссылке можно найти довольно полный список зарезервированных ключевых слов: Lexical grammar — keywords.

Примеры хороших имён переменных:

age myAge init initialColor finalOutputValue audio1 audio2

Примеры плохих имён переменных:

1 a _12 myage MYAGE var Document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman

Примеры имён переменных, которые вызовут ошибки:

var Document

Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.

Типы переменных

Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.

Числа (Numbers)

Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:

var myAge = 17; 

Строки (‘Strings’)

Строки — это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.

var dolphinGoodbye = "So long and thanks for all the fish"; 

Логические (Booleans)

Booleans — истинные / ложные значения — они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:

var iAmAlive = true; 

В действительности вы чаще будете использовать этот тип переменных так:

var test = 6  3; 

Массивы (Arrays)

Массив — это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:

var myNameArray = ["Chris", "Bob", "Jim"]; var myNumberArray = [10, 15, 40]; 

Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:

[0]; // should return 'Chris' myNumberArray[2]; // should return 40 

Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.

В следующей статье вы узнаете больше о массивах.

Объекты (Objects)

В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.

Попробуйте ввести следующую строку в консоль:

var dog =  name: "Spot", breed: "Dalmatian" >; 

Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:

.name; 

Мы больше не будем рассматривать объекты в данном курсе — вы можете больше узнать о них в будущем модуле.

Динамическая типизация

JavaScript — это «динамически типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).

Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:

var myString = "Привет"; 

Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:

var myNumber = "500"; // упс, это все ещё строка (string) typeof myNumber; myNumber = 500; // так-то лучше, теперь это число (number) typeof myNumber; 

Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию typeof() — она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная myNumber содержит строку ‘500’ . Посмотрите, что она вернёт во второй раз, когда вы её вызовите.

Подведение итогов

К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Взаимодействие с пользователем: alert, prompt, confirm

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.

В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.

alert

alert(сообщение)

alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».

alert( "Привет" );

Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».

prompt

Функция prompt принимает два аргумента:

result = prompt(title, default);

Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.

Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.

Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.

Safari 5.1+ не возвращает null

Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.

Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.

Как и в случае с alert , окно prompt модальное.

var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')

Всегда указывайте default

Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию «undefined» .

Запустите этот код в IE, чтобы понять о чём речь:

var test = prompt("Тест");

Поэтому рекомендуется всегда указывать второй аргумент:

var test = prompt("Тест", ''); // 

result = confirm(question);

var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );

var имя_переменной = prompt(msg, defaultText);

document.write(arg1,arg2,arg3. );

var Früh = "foobar"; 

Но, переменная früh не то же самое что Früh потому что JavaScript чувствителен к регистру.

В JavaScript инструкции называются statements и разделяются точкой с запятой (;). Пробел (space), табуляция (tab) и перевод строки (newline) называются пробельными символами (whitespace). Исходный текст скриптов на JavaScript сканируется слева направо и конвертируется в последовательность входных элементов, являющихся токенами (tokens), управляющими символами, символами конца строки, комментариями или пробельными символами. ECMAScript также определяет некоторые ключевые слова и литералы и устанавливает правила для автоматической вставки точек с запятой (ASI), чтобы обозначить конец инструкций (statements). Однако, рекомендуется всегда ставить точку с запятой в конце каждой инструкции вручную, чтобы избежать побочных эффектов. Чтобы получить более подробную информацию, прочитайте Lexical Grammar.

Комментарии

Синтаксис комментариев является таким же, как и в C++ и во многих других языках:

// Комментарий, занимающий одну строку. /* Комментарий, занимающий несколько строк. */ /* Нельзя вкладывать /* комментарий в комментарий */ SyntaxError */ 

Объявления

В JavaScript существует три вида объявлений:

Объявляет переменную, инициализация переменной значением является необязательной.

Объявляет локальную переменную в области видимости блока, инициализация переменной значением является необязательной.

Объявляет именованную константу, доступную только для чтения.

Переменные

Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются identifiers и должны соответствовать определённым правилам.

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

Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать управляющие последовательности Unicode как символы в идентификаторах.

Некоторые примеры корректных имён: Number_hits , temp99 , _name .

Объявление переменных

Вы можете объявить переменную тремя способами:

• Используя ключевое слово var . Например, var x = 42 . Данный синтаксис может быть использован для объявления как локальных, так и глобальных переменных.
• Просто присвоить переменной значение. Например, x = 42 . Переменные, объявленные данным способом, являются глобальными. Такое объявление генерирует строгое предупреждение (strict mode). Не рекомендуется использовать данный способ.
• Используя ключевое слово let . Например, let y = 13 . Данный синтаксис может быть использован для объявления локальной переменной в области видимости блока.

Присваивание значений

Переменная, объявленная через var или let без присвоения начального значения, имеет значение undefined .

При попытке доступа к необъявленной переменной или переменной до её объявления будет выброшено исключение ReferenceError :

var a; console.log("The value of a is " + a); //Значение переменной a undefined console.log("The value of b is " + b); //Uncaught ReferenceError: b не определена console.log("The value of c is " + c); //Значение переменной c undefined var c; console.log("The value of x is " + x); //Uncaught ReferenceError: x не определена let x; 

Вы можете использовать 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; // NaN 

Значение null ведёт себя как 0 в числовом контексте и как false в логическом контексте:

var n = null; console.log(n * 32); // В консоль выведется 0 

Область видимости переменных

Когда вы объявляете переменную вне функции, то такая переменная называется глобальной переменной, т.к. доступна любому коду в текущем документе. Когда вы объявляете переменную внутри функции, то такая переменная называется локальной переменной, т.к. доступна только внутри данной функции.

До ECMAScript 6 в JavaScript отсутствовала область видимости блока; переменная, объявленная внутри блока, является локальной для _функции _(или глобальной области видимости), внутри которой находится данный блок. Например, следующий код выведет значение 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 

Поднятие переменных

Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как поднятие (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые ещё не были инициализированы, возвратят значение undefined :

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

Приведённые выше примеры будут интерпретироваться так же, как:

/* * 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"; >)(); 

Из-за поднятия переменных, все операторы var в функции следует размещать настолько близко к началу функции, насколько это возможно. Следование этому правилу улучшает ясность кода.

В ECMAScript 2015, let (const) не будет подниматься вверх блока. Однако, ссылки на переменную в блоке до объявления переменной вызовут ReferenceError . Переменная во "временной мёртвой зоне" в начале блока, до объявления.

function do_something()  console.log(foo); // ReferenceError let foo = 2; > 

Поднятие функций

Для функций: только определения функций поднимаются наверх, но не функции, определённые через выражения.

/* Определение функции */ foo(); // "bar" function foo()  console.log("bar"); > /* Определение функции через выражение */ baz(); // TypeError: baz is not a function var baz = function ()  console.log("bar2"); >; 

Глобальные переменные

Глобальные переменные на самом деле являются свойствами глобального объекта. На веб-страницах глобальным объектом является window , поэтому вы можете устанавливать глобальные переменные и обращаться к ним, используя синтаксис window.variable :

.foo = "bar"; 

Следовательно, вы можете обращаться к глобальным переменным, объявленным в одном объекте window или frame из другого объекта window или frame, указав имя window или frame. Например, если переменная phoneNumber объявлена в документе, то вы можете сослаться на эту переменную из iframe как parent.phoneNumber .

Константы

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

const PREFIX = "212"; 

Нельзя изменить значение константы через присваивание или повторное объявление во время выполнения скрипта. Значение должно быть указано при инициализации.

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

Нельзя объявить константу с таким же именем, как у функции или переменной в одной области видимости. Следующие примеры выбросят исключение TypeError :

// Это вызовет ошибку function f() > const f = 5; // Это тоже вызовет ошибку function f()  const g = 5; var g; // какие-то выражения > 

Однако, атрибуты объектов не защищены, так что следующее выражение выполнится без проблем

const MY_OBJECT =  key: "value" >; MY_OBJECT.key = "otherValue"; 

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

Типы данных

Последний стандарт ECMAScript определяет семь типов данных:

• Шесть типов данных, которые являются примитивами:
  • Boolean. true и false .
  • null. Специальное ключевое слово, обозначающее нулевое или «пустое» значение. Поскольку JavaScript чувствителен к регистру, null не то же самое, что Null , NULL или любой другой вариант.
  • undefined. Свойство глобального объекта; переменная, не имеющая присвоенного значения, обладает типом undefined .
  • Number. 42 или 3.14159 .
  • String. "Howdy".
  • Symbol (ECMAScript 6)

  Хотя типов данных относительно немного, но они позволяют вам выполнять полезные функции в ваших приложениях. Объекты и функции являются другими фундаментальными элементами языка. Вы можете думать об объектах как об именованных контейнерах для значений и о функциях как о процедурах, которые ваше приложение может исполнять.

  Преобразование типов данных

  JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы её объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:

  var answer = 42; 

  А позже вы можете присвоить этой переменной строковое значение, например:

  = "Thanks for all the fish. "; 

  Поскольку JavaScript является динамически типизированным, это присваивание не вызовет сообщения об ошибке.

  В выражениях, включающих числовые и строковые значения с оператором + , JavaScript преобразует числовые значения в строковые. Например:

  = "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(numString, [radix])
  • parseFloat(numString)

  parseInt преобразует строку в целочисленное значение. Хорошей практикой является всегда указывать основание системы счисления (параметр radix ).

  Альтернативным способом для получения числа из строки является использование оператора "унарный плюс":

  "1.1" + "1.1"; // "1.11.1" (+"1.1") + (+"1.1"); // 2.2 // Обратите внимание на то, что скобки не являются обязательными и используются для ясности. 

  Литералы

  Литералы используются для представления значений в JavaScript. Они являются фиксированными значениями, а не переменными. В данной секции рассматриваются следующие типы литералов:

  • Литерал массива
  • Логический литерал
  • Литерал целого числа
  • Литерал числа с плавающей точкой
  • Литерал объекта
  • RegExp литерал
  • Литерал строки

  Литерал массива

  Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключённый в квадратные скобки ( [] ). Когда вы создаёте массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.

  В следующем примере создаётся массив coffees с тремя элементам и длиной, равной трём:

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

  Примечание: Обратите внимание на то, что литерал массива является инициализатором объекта. Чтобы получить более подробную информацию, прочитайте Использование инициализаторов объекта.

  Если массив создаётся с помощью литерала в скрипте верхнего уровня, то JavaScript интерпретирует массив каждый раз, когда вычисляет выражение, содержащее литерал. Кроме того, литерал, используемый в функции, создаётся каждый раз, когда вызывается функция.

  Литералы массива также являются объектами Array . Чтобы получить более подробную информацию, прочитайте Array и упорядоченные наборы данных.

  Лишние запятые в литералах array

  Не обязательно указывать все элементы в литерале array. Если вы поставите две запятые подряд, то пропущенные элементы будут иметь значение undefined . Например:

  var fish = ["Lion", , "Angel"]; // ["Lion", undefined, "Angel"] 

  У этого массива есть 2 элемента со значениям и один пустой ( fish[0] - "Lion", fish[1] - undefined , а fish[2] - "Angel").

  Если вы поставите запятую в конце списка элементов, то она будет проигнорирована. В следующем примере, длина массива равна 3. Нет myList[3] . Все другие запятые в списке говорят о новом элементе.

  Примечание: Лишние запятые могут вызывать ошибки в старых версиях браузеров, поэтому лучше избегать их использования.

  var myList = ["home", , "school", ]; // ["home", undefined, "school"] 

  В следующем примере длина массива равна четырём, элементы myList[0] и myList[2] имеют значение undefined :

  var myList = [, "home", , "school"]; // [undefined, "home", undefined, "school"] 

  В следующем примере длина массива равна четырём, элементы myList[1] и myList[3] имеют значение undefined . Игнорируется только последняя запятая.

  var myList = ["home", , "school", ,]; // ["home", undefined, "school", undefined] 

  Понимание поведения лишних запятых важно для понимания JavaScript как языка. Однако, когда будете писать свой собственный код, то имейте в виду, что явное объявление отсутствующих элементов как undefined улучшает ясность кода и лёгкость его поддержки.

  Логические литералы

  Логический (Boolean) тип имеет два литеральных значения: true и false .

  Не путайте примитивные логические значения true и false со значениями true и false объекта Boolean. Объект Boolean является объектом-обёрткой над примитивом логического типа. Чтобы получить более подробную информацию, прочитайте Boolean .

  Литерал целого числа

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

  • Десятичный целочисленный литерал состоит из последовательности цифр без ведущего нуля.
  • Ведущий ноль в целочисленном литерале указывает на то, что он записан в восьмеричной системе счисления. Восьмеричные целые числа состоят только из цифр 0-7.
  • Ведущие символы 0x (или 0X) указывают на то, что число шестнадцатеричное. Шестнадцатеричные целые числа могут состоять из цифр 0-9 и букв a-f и A-F.
  • Ведущие символы 0b (или 0B) указывают на то, что число двоичное. Двоичные числа могут включать в себя только цифры 0 и 1.

  Несколько примеров целочисленных литералов:

  0, 117 и -345 (десятичная система счисления) 015, 0001 и -077 (восьмеричная система счисления) 0x1123, 0x00111 и -0xF1A7 (шестнадцатеричная система счисления) 0b11, 0b0011 и -0b11 (двоичная система счисления)

  Литерал числа с плавающей точкой

  Числа с плавающей точкой могут состоять из следующих частей:

  • Десятичное целое число, которое может иметь знак (символ "+" или "-", стоящий перед числом),
  • Десятичная точка ("."),
  • Дробная часть (другое десятичное число),
  • Экспонента.

  Экспонента состоит из символа "e" или "E", за которым следует целое число, которое может иметь знак. Число с плавающей точкой должно состоять по крайней мере из одной цифры и либо десятичной точки, либо символа "e" (или "E").

  В более сжатой форме синтаксис выглядит следующим образом:

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

  3.14 -3.1E+12 -.3333333333333333333 .1e-23

  Литерал объекта

  Литерал объекта — это список из нуля или более пар, состоящих из имён свойств и связанных с ними значений, заключённый в фигурные скобки ( <> ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведёт к ошибке или к поведению, которого вы не ожидаете, потому что символ "

  В следующем примере свойству myCar объекта car присваивается строка "Saturn" , свойству getCar — результат вызова функции CarTypes("Honda") , свойству special — значение переменной Sales :

  var Sales = "Toyota"; function CarTypes(name)  if (name == "Honda")  return name; > else  return "Извините, мы не продаём " + 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 

  Кроме того, вы можете использовать числовой или строковой литералы в именах свойств или вкладывать один объект в другой. Например:

  var car =  manyCars:  a: "Saab", b: "Jeep" >, 7: "Mazda" >; console.log(car.manyCars.b); // Jeep console.log(car[7]); // Mazda 

  Именем свойства объекта может быть любая строка, в том числе пустая строка. Если имя свойства не является корректным JavaScript идентификатором, то оно должно быть заключено в кавычки. Для обращения к таким именам следует использовать квадратные скобки ( [] ), а не точку ( . ):

  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!" 

  В ES2015 литералы объектов расширены до поддержки установки прототипа в конструкции короткой записи для foo: задание foo , определение методов, создание супер вызовов и вычисление имён свойств в выражениях. Вместе, они делают похожими объектные литералы и объявления классов, а также позволяют объектному дизайну получать выгоду одинаковых возможностей.

  var obj =  // __proto__ __proto__: theProtoObj, // Короткая запись для ‘handler: handler’ handler, // Методы toString()  // Супер вызовы return "d " + super.toString(); >, // Динамическое вычисление имён свойств ["prop_" + (() => 42)()]: 42, >; 

  Обратите внимание на следующий пример:

  var foo =  a: "alpha", 2: "two" >; console.log(foo.a); // alpha console.log(foo[2]); // two // console.log(foo.2); // SyntaxError: Unexpected number // console.log(foo[a]); // ReferenceError: a is not defined console.log(foo["a"]); // alpha console.log(foo["2"]); // two 

  RegExp литерал

  Литерал regexp - шаблон между слешами. Следующий пример литерал regex:

  var re = /ab+c/; 

  Строковый литерал

  Строковый литерал — это ноль или более символов, заключённых в двойные ( " ) или одинарные ( ' ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:

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

  Вы можете вызвать любой из методов объекта String для строкового литерала: JavaScript автоматически преобразует строковой литерал во временный объект String , вызовет метод, а затем уничтожит временный объект String . Вы также можете использовать свойство String.length со строковым литералом:

  .log("John's cat".length); // Число символов в строке, включая пробел. // В данном случае длина строки равна 10. 

  В ES2015 также доступны шаблоны строк. Шаблоны строк представляют собой синтаксический сахар для конструирования строк. Это похоже на возможности интерполяции строк в Perl, Python и других. Дополнительно, может быть добавлен тег, позволяющий настраивать конструирование строк, избегая атак внедрения и построения структур данных высокого уровня из содержимого строки.

  // Простое создание строки через литерал string `In JavaScript '\n' is a line-feed.`; // Мультистроковые строки `In JavaScript this is not legal.`; // Интерполяция строк var name = "Бобби", time = "сегодня"; `Привет $name>, как ты $time>?`; // Строим префикс HTTP запроса, используемый для интерпретации замен и конструирования POST`http://foo.org/bar?a=$a>&b=$b> Content-Type: application/json X-Credentials: $credentials> < "foo": $foo>, "bar": $bar>>`(myOnReadyStateChangeHandler); 

  Вам следует использовать строковые литералы до тех пор, пока вам специально не понадобится объект String . Чтобы получить более подробную информацию об объекте String , прочитайте String .

  Использование специальных символов в строках

  Кроме обычных символов вы также можете включать специальные символы в строки.

  "one line \n another line"; 

  В следующей таблице перечислены специальные символы, которые вы можете использовать.

  Символ	Значение
  \b	Возврат (Backspace)
  \f	Перевод или прогон страницы (Form feed)
  \n	Перевод строки (New line)
  \r	Возврат каретки (Carriage return)
  \t	Табуляция (Tab)
  \v	Вертикальная табуляция (Vertical tab)
  \'	Апостроф или одинарная кавычка
  \"	Двойная кавычка
  \\	Обратная косая черта (Backslash)
  \XXX	Символ в кодировке Latin-1, представленный тремя восьмеричными числами XXX от 0 до 377. Например, \251 (символ ©).
  \xXX	Символ в кодировке Latin-1, представленный двумя шестнадцатеричными числами XX от 00 до FF. Например, \xA9 (символ ©).
  \uXXXX	Символ в Unicode, представленный четырьмя шестнадцатеричными числами XXXX. Например, \u00A9 (символ ©).
  \u	Символ в UTF-32BE. Например, \u обозначает то же, что обычная запись \uD87E\uDC04.

  Экранирующие символы

  Для символов, не перечисленных в вышеприведённой таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.

  Вы можете вставить кавычку в строку, если поставите перед ней обратную косую черту. Это называется экранированием кавычек. Например:

  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. 

  Чтобы включить обратную косую черту в строку, перед ней нужно поставить ещё одну обратную косую черту. Например:

  var home = "c:\\temp"; // c:\temp 

  Вы также можете экранировать перевод строки. Обратная косая черта и перевод строки будут удалены из содержимого строки. Например:

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

  Хотя JavaScript не поддерживает синтаксис "heredoc" (форматированный текст в одной строковой переменной), но вы можете эмулировать его, добавив перевод строки и обратную косую черту в конец каждой строки:

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

  Дополнительная информация

  Данная глава сфокусирована на базовом синтаксисе для объявлений и типов. Чтобы получить более подробную информацию о конструкциях JavaScript, прочитайте:

  • Порядок выполнения и обработка ошибок
  • Циклы и итерация
  • Функции
  • Выражения и операторы

  В следующей главе рассматриваются управляющие конструкции и обработка ошибок.

  • « Предыдущая статья
  • Следующая статья »

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 10 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  Похожие публикации:

  1. 2 месяц по счету это какой
  2. Как опубликовать игру в роблокс
  3. Как снять оперативную память на ноутбуке
  4. Митап что это