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

Приведение типов (type coercion)

Это автоматическое или неявное преобразование значений из одного типа данных в другой (например, строки в число). Преобразование типа похоже на приведение типа, потому что они оба преобразуют значения из одного типа данных в другой с одним ключевым🗝️ различием — приведение типа является неявным, тогда как преобразование типа может быть неявным или явным.

Примеры :

Интерактивный редактор

function learnJavaScript() { const value1 = '5' const value2 = 9 let sum = value1 + value2 return sum }

function learnJavaScript() {
  const value1 = '5'
  const value2 = 9
  let sum = value1 + value2

  return sum
}

Результат

Loading...

В приведённом выше примере JavaScript приводит число 9 в строку, а затем объединяет два 2️⃣ значения вместе, в результате получается строка 59. JavaScript имел выбор между строкой или числом и решил использовать строку.

Компилятор мог привести строку 5 к числу и вернуть сумму 14, но он этого не сделал. Чтобы получить этот результат, вам нужно явно преобразовать строку 5 в число, используя метод Number() :

Интерактивный редактор

function learnJavaScript() { const value1 = '5' const value2 = 9 let sum = Number(value1) + value2 return sum }

function learnJavaScript() {
  const value1 = '5'
  const value2 = 9
  let sum = Number(value1) + value2

  return sum
}

Результат

Loading...

Видео

Преобразование типов (type conversion)

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

Строковое преобразование

Строковое преобразование происходит, когда требуется представление чего-либо в виде строки. Например, мы можем использовать функцию String(value), чтобы преобразовать значение к строке :

Интерактивный редактор

function learnJavaScript() { let value = true // boolean value = String(value) return typeof value }

function learnJavaScript() {
  let value = true // boolean

  value = String(value)
  return typeof value
}

Результат

Loading...

Преобразование происходит очевидным образом. true становится "true"

Численное преобразование

Численное преобразование происходит в математических функциях⚙️ и выражениях.

Интерактивный редактор

function learnJavaScript() { let value = '6' / '2' return value }

function learnJavaScript() {
  let value = '6' / '2'

  return value
}

Результат

Loading...

Мы можем использовать функцию Number(value), чтобы явно преобразовать value к числу :

Интерактивный редактор

function learnJavaScript() { let str = '123' let num = Number(str) return typeof num }

function learnJavaScript() {
  let str = '123'
  let num = Number(str)

  return typeof num
}

Результат

Loading...

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

Если строка не может быть явно приведена к числу, то результатом преобразования будет NaN (англ. Not-a-Number, "не число"). Например :

Интерактивный редактор

function learnJavaScript() { let age = Number('Любая строка вместо числа') return age }

function learnJavaScript() {
  let age = Number('Любая строка вместо числа')

  return age
}

Результат

Loading...

Правила численного преобразования:

Значение	Преобразуется в…
undefined	NaN
null	0
true / false	1 / 0
string	Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN.

Примеры:

Number('   123   ') // 123
Number('123z') // NaN (ошибка чтения числа на месте символа "z")
Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN

Учтите, что null и undefined ведут себя по-разному. Так, null становится нулём, тогда как undefined приводится к NaN.

Логическое преобразование

Логическое преобразование самое простое. Происходит в логических операциях, но также может быть выполнено явно с помощью функции⚙️ Boolean(value).

Правила логического преобразования:

Значения, которые интуитивно "пустые", вроде 0, пустой строки, null, undefinedи NaN, становятся false. Все остальные значения становятся true.

Boolean(1) // true
Boolean(0) // false
Boolean('Привет!') // true
Boolean('') // false

Более короткий способ функкции Boolean двойное НЕ(!!) используют для преобразования значений к логическому типу:

!!'non-empty string' // true
!!null // false

То есть первое НЕ преобразует значение в логическое значение и возвращает обратное, а второе НЕ снова инвертирует его. В конце мы имеем простое преобразование значения в логическое.

Заметим, что строчка с нулём "0" — это true

Некоторые языки (к примеру, PHP) воспринимают строку "0" как false. Но в JavaScript, если строка не пустая, то она всегда true

Boolean('0') // true
Boolean(' ') // пробел это тоже true (любая непустая строка это true)

Проблемы?

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы:

Какую функцию нужно использовать для строкового преобразования?

1. Boolean(value)
2. String(value)
3. Number(value)

Что такое приведение типов?

1. Передача данных из одного типа в другой
2. Преобразование значений из одного типа данных в другой
3. Представление чего-либо в виде строки

Какое ключевое различие между приведением типов и преобразованием типов?

1. Приведение типа явное, а преобразование типа неявное
2. Приведение типа неявное, а преобразование типа явное
3. Приведение типа неявное, а преобразование типа может быть и явным и неявным

В каком случае результатом преобразования будет NaN?

1. Когда строка не может быть явно приведена к числу
2. Когда число не может быть явно приведено к строке
3. Когда в коде есть ошибка

Чем становятся «пустые» значения при преобразовании?

1. null
2. true
3. false

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

Ссылки:

1. MDN web docs - Приведение типов
2. для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz
3. JavaScript.ru
4. Арифметические действия с целыми числами

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋