Переменные JavaScript можно объявить четырьмя способами:
Автоматически
Использование var
Использование let
Использование const
В этом первом примере x, y и z являются необъявленными переменными.
Они автоматически объявляются при первом использовании:
x = 5;
y = 6;
z = x + y;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Хорошей практикой программирования считается всегда объявлять переменные перед их использованием.
Из примеров можно догадаться:
x хранит значение 5
y сохраняет значение 6
z хранит значение 11
var x = 5;
var y = 6;
var z = x + y;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Ключевое слово var использовалось во всем коде JavaScript с 1995 по 2015 год.
Ключевые слова let и const были добавлены в JavaScript в 2015 году.
Ключевое слово var следует использовать только в коде, написанном для старых браузеров.
let x = 5;
let y = 6;
let z = x + y;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Две переменные: price1 и price2 объявляются с помощью ключевого слова const.
Это постоянные значения и их нельзя изменить.
Переменная total объявляется с помощью ключевого слова let.
Значение всего можно изменить.
1. Всегда объявляйте переменные
2. Всегда используйте const, если значение не следует изменять.
3. Всегда используйте const, если тип не должен быть изменен (массивы и объекты).
4. Используйте let только в том случае, если вы не можете использовать const
5. Используйте var только в том случае, если вы ДОЛЖНЫ поддерживать старые браузеры.
Как и в алгебре, переменные содержат значения:
let x = 5;
let y = 6;Как и в алгебре, в выражениях используются переменные:
let z = x + y;Из приведенного выше примера вы можете догадаться, что общая сумма равна 11.
Переменные — это контейнеры для хранения значений.
Все переменные JavaScript должны быть идентифицированы с помощью уникальных имен.
Эти уникальные имена называются идентификаторами.
Идентификаторы могут быть короткими именами (например, x и y) или более описательными именами (возраст, сумма, общий объем).
Общие правила построения имен переменных (уникальных идентификаторов):
Имена могут содержать буквы, цифры, символы подчеркивания и знаки доллара.
Имена должны начинаться с буквы.
Имена также могут начинаться с $и _ (но мы не будем использовать их в этом уроке).
Имена чувствительны к регистру (y и Y — разные переменные).
Зарезервированные слова (например, ключевые слова JavaScript) не могут использоваться в качестве имен.
Идентификаторы JavaScript чувствительны к регистру.
В JavaScript знак равенства (=) является оператором присваивания, а не оператором присваивания. оператор «равно».
Это отличается от алгебры. Следующее не имеет смысла алгебра:
x = x + 5 Однако в JavaScript это имеет смысл: он присваивает значение x + 5 Икс.
(Он вычисляет значение x + 5 и помещает результат в x. Значение x увеличивается на 5.)
Оператор «равно» записывается в JavaScript как ==.
Переменные JavaScript могут содержать числа, например 100, и текстовые значения, например «Джон». Доу».
В программировании текстовые значения называются текстовыми строками.
JavaScript может обрабатывать многие типы данных, но сейчас подумайте только о числах и строках.
Строки записываются внутри двойных или одинарных кавычек. Числа написаны без кавычек.
Если вы поместите число в кавычки, оно будет рассматриваться как текстовая строка.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Создание переменной в JavaScript называется «объявлением» переменной.
Вы объявляете переменную JavaScript с помощью ключевого слова var или let:
var carName;let carName;После объявления переменная не имеет значения (технически это undefined).
Чтобы присвоить значение переменной, используйте знак равенства:
carName = "Volvo";Вы также можете присвоить значение переменной при ее объявлении:
let carName = "Volvo";В приведенном ниже примере мы создаем переменную с именем carName и присваиваем ей значение. «Вольво» к этому.
Затем мы «выводим» значение внутри абзаца HTML с id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Хорошей практикой программирования является объявление всех переменных в начале сценария.
Вы можете объявить множество переменных в одном операторе.
Начать заявление с помощью let и разделите переменные запятой:
let person = "John Doe", carName = "Volvo", price = 200;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Объявление может занимать несколько строк:
let person = "John Doe",
carName = "Volvo",
price = 200;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
В компьютерных программах переменные часто объявляются без значения. Значение может быть чем-то, что должно быть рассчитано, или чем-то, что будет предоставлено позже, как ввод пользователя.
Переменная, объявленная без значения, будет иметь значение не определено.
Переменная carName будет иметь значение undefined после выполнения этого оператора:
let carName;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Если вы повторно объявите переменную JavaScript, объявленную с помощью var, она не потеряет свое значение.
Переменная carName по-прежнему будет иметь значение "Volvo" после выполнения этих операторов:
var carName = "Volvo";
var carName;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Вы не можете повторно объявить переменную, объявленную с помощью let или const.
Так не пойдет:
let carName = "Volvo";
let carName;Как и в алгебре, вы можете выполнять арифметические действия с переменными JavaScript, используя такие операторы, как = и +:
let x = 5 + 2 + 3;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Вы также можете добавлять строки, но они будут объединены:
let x = "John" + " " + "Doe";Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Также попробуйте это:
let x = "5" + 2 + 3;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Если вы поместите число в кавычки, остальные числа будут рассматриваться как строки и объединяться.
Теперь попробуйте следующее:
let x = 2 + 3 + "5";Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Поскольку JavaScript воспринимает знак доллара как букву, идентификаторы, содержащие $, являются допустимыми именами переменных:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Использование знака доллара не очень распространено в JavaScript. но профессиональные программисты часто этим пользуются как псевдоним основной функции в библиотеке JavaScript.
Например, в библиотеке JavaScript jQuery основная функция $ используется для выбора элементов HTML. В jQuery $ ("p"); означает "выбрать все p элементов".
Поскольку JavaScript воспринимает подчеркивание как букву, идентификаторы, содержащие _, являются допустимыми именами переменных:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Использование подчеркивания не очень распространено в JavaScript. но среди профессиональных программистов принято использовать его как псевдоним для «частные (скрытые)» переменные.