- JavaScript Type Conversion
- Converting Strings to Numbers
- Examples
- Number Methods
- The Unary + Operator
- Example
- Example
- Converting Numbers to Strings
- Example
- Example
- More Methods
- Converting Dates to Numbers
- Converting Dates to Strings
- Example
- Converting Booleans to Numbers
- Converting Booleans to Strings
- Automatic Type Conversion
- Automatic String Conversion
- JavaScript Type Conversion Table
- Преобразование типов
- Строковое преобразование
- Численное преобразование
- Логическое преобразование
- Итого
JavaScript Type Conversion
JavaScript variables can be converted to a new variable and another data type:
- By the use of a JavaScript function
- Automatically by JavaScript itself
Converting Strings to Numbers
The global method Number() converts a variable (or a value) into a number.
A numeric string (like «3.14») converts to a number (like 3.14).
An empty string (like «») converts to 0.
A non numeric string (like «John») converts to NaN (Not a Number).
Examples
Number Methods
In the chapter Number Methods, you will find more methods that can be used to convert strings to numbers:
Method | Description |
---|---|
Number() | Returns a number, converted from its argument |
parseFloat() | Parses a string and returns a floating point number |
parseInt() | Parses a string and returns an integer |
The Unary + Operator
The unary + operator can be used to convert a variable to a number:
Example
If the variable cannot be converted, it will still become a number, but with the value NaN (Not a Number):
Example
Converting Numbers to Strings
The global method String() can convert numbers to strings.
It can be used on any type of numbers, literals, variables, or expressions:
Example
String(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expression
The Number method toString() does the same.
Example
More Methods
In the chapter Number Methods, you will find more methods that can be used to convert numbers to strings:
Method | Description |
---|---|
toExponential() | Returns a string, with a number rounded and written using exponential notation. |
toFixed() | Returns a string, with a number rounded and written with a specified number of decimals. |
toPrecision() | Returns a string, with a number written with a specified length |
Converting Dates to Numbers
The global method Number() can be used to convert dates to numbers.
The date method getTime() does the same.
Converting Dates to Strings
The global method String() can convert dates to strings.
The Date method toString() does the same.
Example
In the chapter Date Methods, you will find more methods that can be used to convert dates to strings:
Method | Description |
---|---|
getDate() | Get the day as a number (1-31) |
getDay() | Get the weekday a number (0-6) |
getFullYear() | Get the four digit year (yyyy) |
getHours() | Get the hour (0-23) |
getMilliseconds() | Get the milliseconds (0-999) |
getMinutes() | Get the minutes (0-59) |
getMonth() | Get the month (0-11) |
getSeconds() | Get the seconds (0-59) |
getTime() | Get the time (milliseconds since January 1, 1970) |
Converting Booleans to Numbers
The global method Number() can also convert booleans to numbers.
Converting Booleans to Strings
The global method String() can convert booleans to strings.
The Boolean method toString() does the same.
Automatic Type Conversion
When JavaScript tries to operate on a «wrong» data type, it will try to convert the value to a «right» type.
The result is not always what you expect:
5 + null // returns 5 because null is converted to 0
«5» + null // returns «5null» because null is converted to «null»
«5» + 2 // returns «52» because 2 is converted to «2»
«5» — 2 // returns 3 because «5» is converted to 5
«5» * «2» // returns 10 because «5» and «2» are converted to 5 and 2
Automatic String Conversion
JavaScript automatically calls the variable’s toString() function when you try to «output» an object or a variable:
// if myVar = // toString converts to «[object Object]»
// if myVar = [1,2,3,4] // toString converts to «1,2,3,4»
// if myVar = new Date() // toString converts to «Fri Jul 18 2014 09:08:55 GMT+0200»
Numbers and booleans are also converted, but this is not very visible:
// if myVar = 123 // toString converts to «123»
// if myVar = true // toString converts to «true»
// if myVar = false // toString converts to «false»
JavaScript Type Conversion Table
This table shows the result of converting different JavaScript values to Number, String, and Boolean:
Original Value | Converted to Number | Converted to String | Converted to Boolean | Try it |
---|---|---|---|---|
false | 0 | «false» | false | Try it » |
true | 1 | «true» | true | Try it » |
0 | 0 | «0» | false | Try it » |
1 | 1 | «1» | true | Try it » |
«0» | 0 | «0» | true | Try it » |
«000» | 0 | «000» | true | Try it » |
«1» | 1 | «1» | true | Try it » |
NaN | NaN | «NaN» | false | Try it » |
Infinity | Infinity | «Infinity» | true | Try it » |
-Infinity | -Infinity | «-Infinity» | true | Try it » |
«» | 0 | «» | false | Try it » |
«20» | 20 | «20» | true | Try it » |
«twenty» | NaN | «twenty» | true | Try it » |
[ ] | 0 | «» | true | Try it » |
[20] | 20 | «20» | true | Try it » |
[10,20] | NaN | «10,20» | true | Try it » |
[«twenty»] | NaN | «twenty» | true | Try it » |
[«ten»,»twenty»] | NaN | «ten,twenty» | true | Try it » |
function()<> | NaN | «function()<>« | true | Try it » |
NaN | «[object Object]» | true | Try it » | |
null | 0 | «null» | false | Try it » |
undefined | NaN | «undefined» | false | Try it » |
Values in quotes indicate string values.
Red values indicate values (some) programmers might not expect.
Преобразование типов
Чаще всего операторы и функции автоматически приводят переданные им значения к нужному типу.
Например, alert автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.
Есть также случаи, когда нам нужно явно преобразовать значение в ожидаемый тип.
В этой главе мы не касаемся объектов. Сначала мы разберём преобразование примитивных значений.
Мы разберём преобразование объектов позже, в главе Преобразование объектов в примитивы.
Строковое преобразование
Строковое преобразование происходит, когда требуется представление чего-либо в виде строки.
Например, alert(value) преобразует значение к строке.
Также мы можем использовать функцию String(value) , чтобы преобразовать значение к строке:
let value = true; alert(typeof value); // boolean value = String(value); // теперь value это строка "true" alert(typeof value); // string
Преобразование происходит очевидным образом. false становится «false» , null становится «null» и т.п.
Численное преобразование
Численное преобразование происходит в математических функциях и выражениях.
Например, когда операция деления / применяется не к числу:
alert( "6" / "2" ); // 3, строки преобразуются в числа
Мы можем использовать функцию Number(value) , чтобы явно преобразовать value к числу:
let str = "123"; alert(typeof str); // string let num = Number(str); // становится числом 123 alert(typeof num); // number
Явное преобразование часто применяется, когда мы ожидаем получить число из строкового контекста, например из текстовых полей форм.
Если строка не может быть явно приведена к числу, то результатом преобразования будет NaN . Например:
let age = Number("Любая строка вместо числа"); alert(age); // NaN, преобразование не удалось
Правила численного преобразования:
Значение | Преобразуется в… |
---|---|
undefined | NaN |
null | 0 |
true / false | 1 / 0 |
string | Пробельные символы (пробелы, знаки табуляции \t , знаки новой строки \n и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0 , иначе из непустой строки «считывается» число. При ошибке результат NaN . |
alert( Number(" 123 ") ); // 123 alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z") alert( Number(true) ); // 1 alert( Number(false) ); // 0
Учтите, что null и undefined ведут себя по-разному. Так, null становится нулём, тогда как undefined приводится к NaN .
Большинство математических операторов также производит данное преобразование, как мы увидим в следующей главе.
Логическое преобразование
Логическое преобразование самое простое.
Происходит в логических операциях (позже мы познакомимся с условными проверками и подобными конструкциями), но также может быть выполнено явно с помощью функции Boolean(value) .
- Значения, которые интуитивно «пустые», вроде 0 , пустой строки, null , undefined и NaN , становятся false .
- Все остальные значения становятся true .
alert( Boolean(1) ); // true alert( Boolean(0) ); // false alert( Boolean("Привет!") ); // true alert( Boolean("") ); // false
Некоторые языки (к примеру, PHP) воспринимают строку «0» как false . Но в JavaScript, если строка не пустая, то она всегда true .
alert( Boolean("0") ); // true alert( Boolean(" ") ); // пробел это тоже true (любая непустая строка это true)
Итого
Существует 3 наиболее широко используемых преобразования: строковое, численное и логическое.
Строковое – Происходит, когда нам нужно что-то вывести. Может быть вызвано с помощью String(value) . Для примитивных значений работает очевидным образом.
Численное – Происходит в математических операциях. Может быть вызвано с помощью Number(value) .
Преобразование подчиняется правилам:
Значение | Становится… |
---|---|
undefined | NaN |
null | 0 |
true / false | 1 / 0 |
string | Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0 , иначе из непустой строки «считывается» число. При ошибке результат NaN . |
Логическое – Происходит в логических операциях. Может быть вызвано с помощью Boolean(value) .
Значение | Становится… |
---|---|
0 , null , undefined , NaN , «» | false |
любое другое значение | true |
Большую часть из этих правил легко понять и запомнить. Особые случаи, в которых часто допускаются ошибки:
- undefined при численном преобразовании становится NaN , не 0 .
- «0» и строки из одних пробелов типа » » при логическом преобразовании всегда true .
В этой главе мы не говорили об объектах. Мы вернёмся к ним позже, в главе Преобразование объектов в примитивы, посвящённой только объектам, сразу после того, как узнаем больше про основы JavaScript.