|
Приведение типов, оператор присваивания, функции alert, prompt, confirmНа предыдущем занятии мы с вами познакомились с примитивными типами данных. И видели, как переменные автоматически приводились к нужному типу – типу присваиваемых данных. Однако, бывают случаи когда необходимо явно преобразовать выражение к некоторому типу. Рассмотрим сначала строковые преобразования. Предположим, у нас имеется булевая переменная: let a = true; console.log(a); console.log(typeof a); Далее, мы укажем, что хотим преобразовать ее в строковый тип. Это делается так: a = String(a); console.log(a); console.log(typeof a); Вот эта операция String(<выражение>) называется операцией приведения типов. В данном случае булевый тип приводится к строковому и true становится строкой. По аналогии делается численное преобразование. Пусть у нас есть строка: let a = "123"; ее можно преобразовать в число вот так: a = Number(a); в итоге переменная a будет содержать не строку, а число 123. Кстати, когда явно видно, что данные должны быть преобразованы в числа, то виртуальная JavaScript-машина это делает автоматически. Например, при таком делении двух строк: console.log("6" / "3"); в консоле увидим значение 2 – результат деления числа 6 на число 3. Здесь приведение к числовому типу было сделано автоматически. Практически во всех математических операциях делается приведение данных к числовому типу, если это возможно, кроме операции сложения. Складывая две строки: console.log("6" + "3"); мы получим строку «63», а не число 9. Дело в том, что именно этот оператор + выполняет соединение двух строк и к строке 6 была присоединена строка 3, в результате получили строку 63. Причем строки будут соединяться, если хотя бы один из операндов имеет строковый тип. Например, в этих случаях также получим строки: console.log("6" + 3); console.log(6 + "3"); И только когда оба операнда числа, результатом будет число 9: console.log(6 + 3); Так что складывая две переменные как числа, следует быть уверенными, что они числового типа. Для этого их можно явно привести к числовым значениям, а затем, сложить: let a = "6", b = "3"; console.log(Number(a) + Number(b)); Если же по каким-то причинам строку нельзя привести к числу: let a = "no digit"; a = Number(a); то получим значение NaN. Общие правила численного преобразования такие:
console.log( Number(" 123 ") ); // 123 console.log( Number("123z") ); // NaN (ошибка чтения числа в "z") console.log( Number(true) ); // 1 console.log( Number(false) ); // 0 Приведение к булевому типуДля этого используется функция Boolean(<выражение>) которая преобразует:
Например: console.log( Boolean(1) ); // true console.log( Boolean(0) ); // false console.log( Boolean("0") ); // true console.log( Boolean("Привет!") ); // true console.log( Boolean("") ); // false Обратите внимание, что строчка с нулем «0» преобразуется в true, так как это обычная не пустая строка. Оператор присваиванияТеперь подробнее рассмотрим оператор присваивания. Его не стоит путать со знаком = из математики. Он выполняет присваивание переменной, записанной слева от него, значения (или переменной), записанной справа. Например: let a = 4; Этот оператор имеет один из самых низких приоритетов (равный 3). Именно поэтому, когда переменной что-либо присваивают, например, x = 2 * 2 + 1, то сначала выполнится арифметика, а уже затем происходит присваивание. Также возможно присваивание по цепочке: let a, b, c; a = b = c = 2 + 2; console.log( a, b, c ); Такое присваивание работает справа-налево. Сначала вычисляется самое правое выражение 2 + 2, и затем оно присваивается переменным слева: c, b и a. В конце у всех переменных будет одно значение. Далее, оператор = возвращает значение. Например, при присваивании x=value значение value сначала записывается в x, а затем возвращается. В частности, именно поэтому возможна такая запись: let a, b = 1; let c = 3 - (a = b + 1); console.log( a, b, c ); Здесь сначала переменной a будет присвоено значение 1+1=2, далее оно возвращается оператором присваивания и получаем вычисление разности 3-2=1. В итоге имеем значения a=2, b=1, c=1. Этот пример приведен, чтобы вы понимали, как это работает, так как иногда это можно увидеть в JavaScript-библиотеках, но писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным. Функции alert, prompt, confirmВ заключение этого занятия познакомимся с функциями alert, prompt, confirm, которые реализуются в JavaScript движках, работающих в браузерах. То есть, вызывая эти функции, мы предполагаем, что наш скрипт запущен именно в браузере, а не какой-то другой среде. Первая функция alert() отображает окно с сообщением и приостанавливает дальнейшее исполнение скрипта. Синтаксис функции такой: alert(<сообщение>); Например: alert("Hello"); выведет на экран модальное окно с сообщением «Hello». Модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы до тех пор, пока окно открыто. Для продолжения работы скрипта пользователь должен нажать кнопку «OK». Окно будет закрыто и программа продолжит свою работу. Следующая функция prompt() отображает модальное окно для ввода каких-либо данных. Синтаксис этой функции такой: result = prompt(title, [default]); здесь title – текст для отображения в окне; default – необязательный аргумент, устанавливающий некое значение по умолчанию. Пример: let age = prompt("Сколько вам лет?", 18); console.log(age); Выведет окно и попросит ввести ваш возраст. Если пользователь нажмет кнопку OK, то переменная age будет содержать введенный возраст, а при нажатии на «Отмена» (или нажав клавишу ESC) – значение null. Заметка: для браузера IE лучше всегда указывать второй параметр, иначе значение по умолчанию будет равно undefined. Третья функция confirm() отображает модальное окно с текстом вопроса и имеет такой синтаксис: result = confirm(question); здесь question – текст вопроса; result – результат ответа: принимает значение true, если пользователь нажал на кнопку OK и false – в других случаях. Пример: let isCar = confirm("У тебя есть машина?"); console.log(isCar); Все эти функции нам понадобятся в дальнейшем при изучении JavaScript. Видео по теме |
