Перетворення типів даних

JavaScript type conversion

javascript type convert

javascript конвертація типів даних

У JavaScript типи даних конвертуються (перетворюються) у потрібний тип автоматично.

Наприклад коли потрібно вивести значення як рядок (String) JavaScript використовує метод toString() для всіх інших типів даних. Якщо очікується логічне значення наприклад для умовного оператора if то JavaScript перетворює будь який тип даних у true або false.

У випадку якщо очікується число то JavaScript перетворює значення у тип Number, якщо це не вдається перетворити буде отримано значення NaN.

'2'*2; // 4 '2'+2; // "22" об'єднює рядок і число, результатом є рядок '2'-2; // 0 '2'/2; // 1 '2text'/2; // NaN

Зверніть увагу що при виконанні автоматичного перетворення типів JavaScript повертає значення тіж самі що і: Array(), Date(), Object(), Boolean()Number(), String().

У наведеній нижче таблиці описано, як в JavaScript виконується перетворення значень з одного типу в інший:

значенняString()Number()Boolean()Array()Object()new Date()
""
порожній рядок
""0false[""]String("")Invalid Date
"текст""текст"NaNtrue["текст"]String("текст")Invalid Date
"1""1"1true["1"]String("1")Invalid Date
"0""0"0true["0"]String("0")Invalid Date
"-1""-1"-1true["-1"]String("-1")Invalid Date
"016""016"16true["016"]String("016")Invalid Date
"0xff""0xff"255true["0xff"]String("0xff")Invalid Date
"2.5""2.5"2.5true["2.5"]String("2.5")Invalid Date
".03"".03"0.03true[".03"]String(".03")Invalid Date
"2016-09-14 01:55:36""2016-09-14 01:55:36"NaNtrue["2016-09-14 01:55:36"]String("2016-09-14 01:55:36")Wed Sep 14 2016 01:55:36 GMT+0300 (EEST)
"2016-09-14""2016-09-14"NaNtrue["2016-09-14"]String("2016-09-14")Wed Sep 14 2016 03:00:00 GMT+0300 (EEST)
"2016""2016"2016true["2016"]String("2016")Fri Jan 01 2016 02:00:00 GMT+0200 (EET)
"false""false"NaNtrue["false"]String("false")Invalid Date
"true""true"NaNtruetruetrueInvalid Date
0"0"0false[]Number(0)Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
1"1"1true[null]Number(1)Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
-0"0"0false[]Number(-0)Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
2.5"2.5"2.5trueinvalid array lengthNumber(2.5)Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
NaN"NaN"NaNfalseinvalid array lengthNumber(NaN)Invalid Date
Infinity"Infinity"Infinitytrueinvalid array lengthNumber(Infinity)Invalid Date
-Infinity"-Infinity"-Infinitytrueinvalid array lengthNumber(-Infinity)Invalid Date
true"true"1true[true]Boolean(true)Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
false"false"0false[false]Boolean(false)Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
undefined"undefined"NaNfalse[null]Object()Invalid Date
null"null"0false[null]Object()Thu Jan 01 1970 02:00:00 GMT+0200 (EET)
[]""0true[[]]Array()Invalid Date
[1,2,3]"1,2,3"NaNtrue[[1,2,3]]Array(1,2,3)Fri Jan 02 1903 00:00:00 GMT+0200 (HMT)
[3]"3"3true[[3]]Array(3)Invalid Date
{}"[object Object]"NaNtrue[{}]Object()Invalid Date
function (){}"function (){}"NaNtrue[function (){}]Function()Invalid Date
Date('2016-09-15 14:54:05')"Thu Sep 15 2016 14:54:05 GMT+0300 (EEST)"1473940445000true["Thu Sep 15 2016 14:54:05 GMT+0300 (EEST)"]String("Thu Sep 15 2016 14:54:05 GMT+0300 (EEST)")Thu Sep 15 2016 14:54:05 GMT+0300 (EEST)
var s = String(2); //s="2"; s=new String(true); // "true" var n = new Number("2.518"); //2.518 Number("2"); //2 Number("2.51"); // 2.51 Number(".51"); // 0.51 Number("2.51text"); //NaN Number("t2.51"); // NaN Boolean(1); //true Boolean("false"); //true Boolean("true"); //true

Інколи виникає необхідність зробити перетворення типів "вручну", для цього у JavaScript є методи (функції) які дозволяють перетворювати з одного типу даних у інший.

Array to String

Якщо необхідно масив представити як рядок JavaSctipt по замовчуваню використовує метод Array.toString() який перетворює масив у рядок при цоьму елементи масиву розділяє комами:

var mas= [1, 2, 3, "чотири", [10, 20, 30] ]; alert(mas.toString()); // '1,2,3,чотири,10,20,30'

Для цього щоб перетворити масив у рядок і розділити елементи іншим символом використовують метод Array.join():

var mas= [1, 2, 3, "чотири", [10, 20, 30] ]; var s=mas.join('|'); alert( s ); // '1|2|3|чотири|10,20,30

Зверніть увагу що методи Array.toString() і Array.join() некоректно перетворюють багатовимірний масив.

Тому рекомендовано для повноціного перетворення масиву у рядок використовувати метод JSON.stringify():

var mas= [1, 2, 3, "чотири", [10, 20, 30] ]; s=JSON.stringify(mas); alert( s ); //'[1,2,3,"чотири",[10,20,30]]'

Date to String

Для перетворення дати у рядок є методи: Date.toString() який викликається автоматично коли необхідно представити дату як рядок, Date.toDateString(), Date.toGMTString(), Date.toJSON(), Date.toLocaleDateString(), Date.toLocaleString(), Date.toLocaleTimeString(), Date.toTimeString(), Date.toUTCString():

var d = new Date('2016-09-15 14:08:45'); d.toDateString(); // "Thu Sep 15 2016" d.toGMTString(); // "Thu, 15 Sep 2016 11:08:45 GMT" d.toJSON(); // "2016-09-15T11:08:45.000Z" d.toLocaleDateString(); // "09/15/2016" d.toLocaleString(); // "Thu Sep 15 14:08:45 2016" d.toLocaleTimeString(); // "14:08:45" d.toTimeString(); // "14:08:45 GMT+0300 (EEST)" s=d.toUTCString(); // "Thu, 15 Sep 2016 11:08:45 GMT"

Date to Number

Перетворити дату у число можливо лише принципом отримати кількість мілісекунд з 01.01.1970 методом Date.getTime():

var d=new Date('2016-09-15 14:54:05'); var n=d.getTime(); //n= 1473940445000

String to Number:

Перетворення рядок у ціле число за допомогою метода parseInt():

parseInt("123"); // 123 parseInt("23.5"); // 23 parseInt("-5"); // -5 parseInt("+3"); // 3 parseInt("2."); // 2 parseInt(".5"); // NaN parseInt("2 текст"); // 2 parseInt("текст 2"); // NaN parseInt(); //NaN parseInt(""); //NaN parseInt(undefined); //NaN parseInt(true); //NaN alert(parseInt("1+1")); //1

Перетворення рядок у число з плаваючою крапкою за допомогою parseFloat():

parseFloat("34"); //34 parseFloat("2.5"); //2.5 parseFloat("2.5текст"); //2.5 parseFloat("текс2.5"); //NaN alert( parseFloat(".5") ); // 0.5

Витягнення числа з рядка за допомогою регулярного виразу:

//витягуємо ціле значення і перетворюмоє у число parseInt("text 2.51 hu".match(/d+/)); // 2 //витягуємо значення з плаваючою крапкою і перетворюємо у число parseFloat("text 2.51 hu".match(/d+.d+/)); // 2.51 //витягуємо будь яке цифрове значення і перетворюємо на число parseFloat("text 25.1к hu".match(/d+.?d+/)); // 25.1

String to Array

Перетворення рядка у масив відбувається за допомогою методу String.split():

var s='Віра|Надія|Любов'; var mas=s.split('|'); //["Віра", "Надія", "Любов"] var mas= "JS,JavaScript,яваскрирт,джаваскрипт".split(','); // mas = ["JS", "JavaScript", "яваскрирт", "джаваскрипт"]

String to Date

Перетворення рядка у дату відбувається методом створення об'єкту Date:

var s='2010-12-01 20:07:25'; var d=new Date(s); var d=new Date('2016-09-14 20:21:56'); d=new Date('2016-09-14T17:21:56.000Z'); d=new Date("Wed Sep 14 2016 20:33:39 GMT+0300 (EEST)"); d=new Date("14-09-2016 21:08:51"); //invalid Date

String to Object

Для перетворення рядкового представлення об'єкту (JSON) у об'єкт JavaScript використовується JSON.parse():

var s='{"test":"String object", "n":2}'; var ob=JSON.parse(s); var ob=JSON.parse('{"a":5}'); alert( ob.a );

String to Boolean

Так як при Boolean() будь який не порожній рядок дорівнює true, тому для рідків "true" і "false" потрібно використовувати JSON.parse():

var b=JSON.parse("true"); // true b=JSON.parse("false"); // false b=JSON.parse("text"); // SyntaxError: JSON.parse: unexpected keyword at line 1 column 1 of the JSON data b= JSON.parse("False"); // SyntaxError: JSON.parse: unexpected keyword at line 1 column 1 of the JSON data //або просте порівняня var s='false'; if(s=='false') b=false; else b=true;

Повноціний метод перетворення типів у логічний тип:

function ToBoolean(s){ if(s.toString().toLowerCase()=='false') return false; return Boolean(s).valueOf(); } b = ToBoolean(1); // true var b = ToBoolean('false'); // false alert('b: '+(typeof b)+' '+b);