Javascript приведение типов к строке. JavaScript: Преобразование типов данных. Изменение типа строки на число

JavaScript предоставляет несколько встроенных типов данных. В дополнение к ним эта статья рассматривает виртуальные типы в jQuery такие как селекторы, расширенные псевдотипы как события, а также все виды функций.

Лучше если вы попробуете большинство примеров, изложенных ниже. Это можно легко сделать, просто скопировав эти примеры в консоль Firebug — расширения браузера Firefox.

Всякий раз, когда в примерах производятся операции в булевском контексте (например, при сравнении), важно знать, как себя ведет в таком контексте каждый из типов данных:

Var x = "" if (x) console.log("x defaulted to true") else console.log("x defaulted to false")

В этом случае напечатается "x приравнивается к false".

Для уменьшения объема примеров используется оператор отрицания, чтобы показать булевский контекст:

X // true

Типы данных в jQuery

Строки

• Встроенные методы для строк
• Свойство length
• Булевский контекст

Числа

• Булевский контекст
• Parsing Numbers
• Numbers to Strings
• NaN and Infinity
• Integer
• Float

Булевский тип

Объекты

• Dot Notation
• Array Notation
• Iteration
• Boolean default
• Prototype

Options

Массивы

• Iteration
• Boolean Default
• Array Notation

Функции

• Аргументы
• Context, Call and Apply
• Область видимости
• Closures
• Proxy Pattern

Callback-функции

Селекторы

События

Элементы

jQuery-тип

Тип XMLHttpRequest

Строки "Это строка JavaScript!" "И это тоже строка!"

Строка в JavaScript — это неизменяемый объект, который содержит ни одного, один или несколько символов.

Типом строк является "string". Узнать тип строки можно так:

Typeof "some string"; // "string"

Использование кавычек в строках

Строка может быть определена с помощью одинарных или двойных кавычек. Вы можете свободно использовать одинарные кавычки внутри строки, заключенной в двойные кавычки и наоборот. Чтобы использовать двойные кавычки внутри строк, заключенных в двойные кавычки, их нужно экранировать с помощью обратного слеша \ . Это относится и к одинарным кавычкам.

"You make "me" sad." "Holy "cranking" moses!" "Главная" "Главная"

Встроенные методы для строк

В JavaScript имеется несколько встроенных методов для манипулирования строками, результат которых может быть как строка, так, например, и массив:

"hello".charAt(0) // "h" - получение символа в нужной позиции строки "hello".toUpperCase() // "HELLO" - преобразование строки в верхний регистр "Hello".toLowerCase() // "hello" - преобразование строки в нижний регистр "hello".replace(/e|o/g, "x") // "hxllx" - замена части строки на подстроку по шаблону регулярного выражения "1,2,3".split(",") // ["1", "2", "3"] - разбиение строки на массив по определенной подстроке

Свойство length

Строки имеют свойство length, которое определяет длину строки.

"Hello".length // 5 "".length // 0

Булевский контекст

Пустая строка приравнивается к значению false:

!"" // true !"hello" // false !"true" // false !new Boolean(false) // false

Числа 12 3.543

Числа в JavaScript имеют 64-битный формат двойной точности по стандарту IEEE 754. Они также являются неизменяемыми. Для работы с числами доступны все операторы, такие же как в языке C (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).

Типом для чисел является "number". Проверить тип чисел можно так:

Typeof 12 // "number" typeof 3.543 // "number"

Булевский контекст

Если число равно нулю, то оно приравнивается к false:

0 // true !1 // false !-1 // false

Из-за того, что числа реализованы в формате с двойной точностью, результат следующего примера не является ошибочным:

0.1 + 0.2 // 0.30000000000000004

Объект Math

JavaScript предоставляет функции для работы с числами в объекте Math:

Math.PI // 3.141592653589793 Math.cos(Math.PI) // -1

Преобразование в числа

Функции parseInt и parseFloat преобразуют строки в числа. И та, и другая функция выполняет неявное преобразование, если не указана система счисления:

ParseInt("123") = 123 (неявное преобразование десятичного числа) parseInt("010") = 8 (невяное преобразование восьмеричного числа) parseInt("0xCAFE") = 51966 (неявное преобразование шестнадцатеричного числа) parseInt("010", 10) = 10 (явное преобразование десятичного числа с указанием системы счисления 10) parseInt("11", 2) = 3 (явное преобразование двоичного числа) parseFloat("10.10") = 10.1

Преобразование чисел в строки

Если добавлять числа к строке с помощью операции "+", то результатом всегда будет строка. Чтобы произвести вычисления и только потом добавить число к строке, не забудьте заключить вычисления в круглые скобки:

"" + 1 + 2; // "12" "" + (1 + 2); // "3" "" + 0.0000001; // "1e-7" parseInt(0.0000001); // 1 (обратите внимание!)

Вы также можете использовать JavaScript-класс String, который преобразует переданное значение в строку:

String(1) + String(2); // "12" String(1 + 2); // "3"

Типы NaN и Infinity

Преобразование значений, которые не являются числами, приводит к результату NaN. Функция isNaN определяет, равно ли переданное в неё значение NaN:

ParseInt("hello", 10) // NaN isNaN(parseInt("hello", 10)) // true

Деление на ноль дает в качестве результата бесконечность (Infinity):

1 / 0 // Infinity

И значение NaN и Infinity имеют тип "number":

Typeof NaN // "number" typeof Infinity // "number"

Обратите внимание, что сравнение значений NaN происходит нестандартным способом:

NaN == NaN // false (!)

Infinity == Infinity // true

Тип Integer

Integer — целочисленный тип.

Тип Float

Float — тип чисел с плавающей точкой.

Булевский тип (Boolean)

Булевский тип в JavaScript может принимать значение true или false:

If (true) console.log("always!") if (false) console.log("never!")

Например, булевский тип выглядит следующим образом при задании настроек при подключении плагинов jQuery:

$("...").somePlugin({ hideOnStartup: true, onlyOnce: false });

Объекты

Всё в JavaScript является объектом. Самый простой способ создать объект:

Var x = {}; var y = { name: "Pete", age: 15 };

Типом для объектов является "object":

Typeof {} // "object"

Свойства объекта

Вы можете изменять и получать свойства объекта, используя точечную нотацию:

Y.name // "Pete" y.age // 15 x.name = y.name + " Pan" // "Pete Pan" x.age = y.age + 1 // 16

Вы также можете использовать объект в качестве массива:

Var operations = { increase: "++", decrease: "--" } var operation = "increase"; operations // "++"; operations["multiply"] = "*"; // "*"

Итерации у объектов

Итерирование над объектами осуществляется очень легко с помощью оператора цикла for-in:

Var obj = { name: "Pete", age: 15 }; for(key in obj) { alert("key is "++", value is "+obj); }

jQuery предоставляет функцию

для итерираций по свойствам объектов или элементам массивов:

JQuery.each(obj, function(key, value) { console.log("key", key, "value", value); });

Булевский контекст

Объект, независимо от того, имеет ли он свойства или нет, всегда имеет значение true:

!{} // false

Прототипы

Все объекты имеют свойство prototype . Всякий раз, когда интерпретатор ищет какое-либо свойства у объекта, он также проверяет его прототип. В jQuery этот механизм широко используется для добавления методов к экземплярам объектов jQuery.

Var form = $("#myform"); form.clearForm; // undefined form.fn.clearForm = function() { return this.find(":input").each(function() { this.value = ""; }).end(); }; form.clearForm() // может быть применено ко всем экземплярам объектов jQuery, так как новый метод был добавлен к прототипу

В JavaScript значения достаточно свободно (явно и неявно) могут быть преобразованы из одного типа в другой. Например, если какой-нибудь оператор ожидает получить значение определённого типа, а ему передаётся значение другого типа, то интерпретатор автоматически попытается выполнить преобразования к нужному типу:

Console.log(10 + " машин"); // "10 машин". Число неявно преобразуется в строку console.log("7" * "4"); // 28. Обе строки неявно преобразуются в числа

Неявное преобразование - это когда интерпретатор автоматически выполняет преобразование типов, т. е. без участия программиста. Явное преобразование - это когда преобразование выполняет сам программист. Явное преобразование иначе называют приведением типов :

Console.log("7" * "4"); // 28. Неявное преобразование console.log(Number("7") * Number("4")); // 28. Явное преобразование

В таблице ниже описывается, как в JavaScript выполняется преобразование значений из одного типа в другой. Пустые ячейки соответствуют ситуациям, когда преобразование не требуется:

Значение Преобразование в: Строку Число Булево Объект

undefined null	"undefined" "null"	NaN 0	false false	ошибка typeError ошибка typeError
true false	"true" "false"	1 0		new Boolean(true) new Boolean(false)
"" (пустая строка) "1.2" "one" "-10" "+10" "011" "0xff"		0 1.2 NaN -10 10 11 255	false true true true true true true	new String("") new String("1.2") new String("one") new String("-10") new String("+10") new String("011") new String("0xff")
0 -0 NaN Infinity -Infinity 3	"0" "0" "NaN" "Infinity" "-Infinity" "3"		false false false true true true	new Number(0) new Number(-0) new Number(NaN) new Number(Infinity) new Number(-Infinity) new Number(3)
{} (любой объект) (пустой массив) (1 числовой элемент) arr (любой другой массив) function(){} (любая функция)	см. Преобразование объектов "" "9" см. Преобразование объектов см. Преобразование объектов	см. Преобразование объектов 0 9 NaN NaN	true true true true true

Для явного преобразования в простые типы используются следующие функции: Boolean() , Number() , String() . При неявном преобразования интерпретатор использует те же функции, что используются для явного преобразования.

Для явного преобразования можно использовать операторы вместо функций. Например, если один из операндов оператора + является строкой, то другой операнд также преобразуется в строку. Унарный оператор + преобразует свой операнд в число. Унарный оператор! преобразует операнд в логическое значение и инвертирует его. Всё это стало причиной появления следующих своеобразных способов преобразования типов, которые можно встретить на практике:

X + "" // То же, что и String(x) +x // То же, что и Number(x). Можно также встретить x - 0 !!х // То же, что и Boolean(x)

Преобразование в числа

Функция Number() преобразует значения по следующим правилам:

• Логические значения true и false преобразуются в 1 и 0 соответственно.
• Числа возвращаются без изменения.
• Значение null преобразуется в 0 .
• Значение undefined преобразуется в NaN .

Для строк действуют особые правила:

• Если строка содержит только цифры с начальным знаком + или - либо без знака, она всегда преобразуется в целое десятичное число. Начальные нули игнорируются, например "0011" преобразуется в 11.
• Если строка представляет собой число с плавающей точкой с начальным знаком + или - либо без знака, она преобразуется в соответствующее число с плавающей точкой (начальные нули также игнорируются).
• Если строка представляет собой число в шестнадцатеричном формате, она преобразуется в соответствующее целое десятичное число.
• Если строка пустая, она преобразуется в 0 .
• Если строка содержит что-то отличное от предыдущих вариантов, она преобразуется в NaN .
• Для объектов вызывается метод valueOf() , а возвращаемое им значение автоматически преобразуется по предыдущим правилам. Если это преобразование даёт в результате NaN , вызывается метод toString() и применяются правила преобразования строк в числа.

Унарные операторы + и - работают по тем же правилам, что и функция Number() .

Преобразование в булевы значения

Функция Boolean() преобразует значение в его логический эквивалент:

• Следующие значения в результате преобразования дают значение false: undefined , null , 0 , -0 , NaN , "" .
• Значение false возвращается без изменения.
• Все остальные значения в результате преобразования дают значение true .

Преобразование в строки

Функция String() преобразует значения по следующим правилам:

• Для всех значений кроме null и undefined автоматически вызывается метод toString() и возвращается строковое представление значения.
• Для значения null возвращается строка "null" .
• Для значения undefined возвращается строка "undefined" .

Преобразование простых типов в объекты

Для преобразования простых значений в объекты используются конструкторы Boolean() , Number() , String() :

Var oNum = new Number(3); var oStr = new String("1.2"); var oBool = new Boolean(true); alert(typeof oNum); // "object" alert(typeof oStr); // "object" alert(typeof oBool); // "object"

Преобразование объектов в простые значения

Все объекты наследуют два метода преобразования: toString() и valueOf() .

Метод toString() возвращает строковое представление объекта. По умолчанию он ничего интересного не возвращает:

Alert({x: 1}.toString()); // ""

Некоторые типы имеют более специализированные версии метода toString() . Например, метод toString() у массива преобразует все его элементы в строки и затем объединяет их в одну строку, вставляя запятые между ними:

Alert(.toString()); // "1,2,3"

Задача метода valueOf() определена не так чётко: предполагается, что он должен преобразовать объект в представляющее его простое значение, если такое значение существует. Объекты по своей сути являются составными значениями, и большинство объектов не могут быть представлены в виде единственного простого значения, поэтому по умолчанию метод valueOf() возвращает не простое значение, а ссылку на него:

Alert(typeof {x:2}.valueOf()); // "object"

При преобразовании объекта в строку интерпретатор JavaScript выполняет следующие действия:

• Если объект имеет метод toString() , интерпретатор вызывает его. Если он возвращает простое значение, интерпретатор преобразует значение в строку (если оно не является строкой) и возвращает результат преобразования.
• Если объект не имеет метода toString() или этот метод не возвращает простое значение, то интерпретатор проверяет наличие метода valueOf() . Если этот метод определён, интерпретатор вызывает его. Если он возвращает простое значение, интерпретатор преобразует это значение в строку (если оно не является строкой) и возвращает результат преобразования.

При преобразовании объекта в число интерпретатор выполняет те же действия, но первым пытается применить метод valueOf() :

• Если объект имеет метод valueOf() , возвращающий простое значение, интерпретатор преобразует (при необходимости) это значение в число и возвращает результат.
• Если объект не имеет метода valueOf() или этот метод не возвращает простое значение, то интерпретатор проверяет наличие метода toString() . Если объект имеет метод toString() , возвращающий простое значение, интерпретатор выполняет преобразование и возвращает полученное значение.
• В противном случае интерпретатор делает вывод, что ни toString() ни valueOf() не позволяют получить простое значение и возбуждает ошибку TypeError .

Методы toString() и valueOf() доступны для чтения и записи, поэтому их можно переопределить и явно указать, что будет возвращаться при преобразовании:

Var obj = {}; obj.toString = function() { return "объект"; }; alert("Это " + obj); // "Это объект"

Последнее обновление: 1.11.2015

Нередко возникает необходимость преобразовать одни данные в другие. Например:

Var number1 = "46"; var number2 = "4"; var result = number1 + number2; console.log(result); //464

Обе переменных представляют строки, а точнее строковые представления чисел. И в итоге мы получим не число 50, а строку 464. Но было бы неплохо, если бы их тоже можно было бы складывать, вычитать, в общем работать как с обычными числами.

В этом случае мы можем использовать операции преобразования. Для преобразования строки в число применяется функция parseInt() :

Var number1 = "46"; var number2 = "4"; var result = parseInt(number1) + parseInt(number2); console.log(result); // 50

Для преобразования строк в дробные числа применяется функция parseFloat() :

Var number1 = "46.07"; var number2 = "4.98"; var result = parseFloat(number1) + parseFloat(number2); console.log(result); //51.05

При этом строка может иметь смешанное содержимое, например, "123hello", то есть в данном случае есть цифры, но есть и обычные символы. Но метод parseInt() все равно попытается выполнить преобразование:

Var num1 = "123hello"; var num2 = parseInt(num1); console.log(num2); // 123

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

С помощью специальной функции isNaN() можно проверить, представляет ли строка число. Если строка не является числом, то функция возвращает true, если это число - то false:

Var num1 = "javascript"; var num2 = "22"; var result = isNaN(num1); console.log(result); // true - num1 не является числом result = isNaN(num2); console.log(result); // false - num2 - это число

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

Var num1 = "110"; var num2 = parseInt(num1, 2); console.log(num2); // 6

Результатом будет 6, так как 110 в двоичной системе - это число 6 в десятичной.

Теперь напишем небольшую программу, в которой используем операции с переменными:

JavaScript var strSum = prompt("Введите сумму вклада", 1000); var strPercent = prompt("Введите процентную ставку", 10); var sum = parseInt(strSum); var procent = parseInt(strPercent); sum = sum + sum * procent / 100; alert("После начисления процентов сумма вклада составит: " + sum);

С помощью функции prompt() в браузере выводится диалоговое окно с предложением ввести некоторое значение. Второй аргумент в этой функции указывает на значение, которое будет использоваться по умолчанию.

Однако функция prompt() возвращает строку. Поэтому эту строку нам надо преобразовать в число, чтобы выполнить с ней операции.

После открытия страницы в браузере мы увидим приглашение к вводу суммы вклада:

Затем подобное сообщение отобразится и для ввода процента. И в конце программа получит данные, преобразует их в числа и выполнит подсчет.

В JavaScript существуют 2 встроенные функции для преобразования строк в числа: parseFloat() и parseInt() .

parseFloat() принимает аргументом строку, которую необходимо привести к численному типу, и возвращает число типа float. Число должно содержаться в начале строки. Если после числа в строке идут ещё какие-то символы, то они отсекаются. Дробная часть числа должна быть записана через точку (запятая не воспринимается как разделитель). В случае, если parseFloat() не может преобразовать строку, то она возвращает NaN.

Также функция может обработать «число n, умноженное на 10 в степени x», которое в программировании принято записывать через букву E, например: 0.5E6 или 0.5E+6. Степень может быть также отрицательная: 0.5E-6, что равно 0.5*10^-6 или 0.5/1000000.

ParseFloat(""3.78kg"") // 3.78 parseFloat(""kg33"") // NaN parseFloat(""0004.111"") // 4.111 parseFloat(""0x66"") // 0 parseFloat("".5"") // 0.5 parseFloat(""-.5"") // -0.5 parseFloat(""0.5e6"") // 500000 parseFloat(""0.03E+2"") // 3 parseFloat(""3E-4"") // 0.0003 parseFloat(""-3E-4"") // -0.0003

Функция parseInt(string[, radix]) принимает в качестве первого аргумента строку, анализирует её и возвращает целое число (тип integer). Функция пытается анализировать систему счисления, в которой записано число в исходной строке (например, десятичная, восьмеричная или шестнадцатеричная — но не только эти). Также систему счисления можно указать явно, передав её вторым параметром radix. Параметр radix может принимать любое число от 2 до 36 (в системах выше 10-й используются буквы английского алфавита, от A до Z).

Числа типа 1.5e6 функция не обрабатывает так, как parseFloat() .

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

ParseInt(""25"") // 25 parseInt(""-25"") // -25 parseInt(""45.12"") // 45 parseInt(""045"",10) // 45 parseInt(""70"",8) // 56 (70 в восьмеричной системе это 56 в десятичной) parseInt(""070"") // 56 (ВАЖНО!!! нуль вначале заставит функцию проанализировать строку как восьмеричное число) parseInt(""88"",8) // NaN (в восьмеричной системе нет цифры 8) parseInt(""a1"") // NaN (ВАЖНО!!! Функция по умолчанию не воспринимает число как 16-ричное, если не дописать в начале строки 0x) parseInt(""a1"",16) // 161 (здесь явно указана система счисления) parseInt(""0xa1"") // 161 (правильный формат 16-ричного числа, можно не указывать второй параметр) parseInt(""099"") // 0 (ВАЖНО!!! Число воспринимается как восьмеричное, но содержащее недопустимые символы) parseInt(""0.5e6"") // 0 (ВАЖНО!!! не работает как parseFloat) parseInt(""ZZ"",36) // 1295 parseInt(""-FF"") // NaN parseInt(""-FF"",16) // -255

Если Вы обрабатываете данные из текстового поля, которые вводит пользователь, всегда используйте parseInt() вместе со вторым параметром radix, это обезопасит Ваш код от неожиданных результатов.

Существует два основных способа преобразования строки в число в javascript. Один из способов - проанализировать его, а другой способ - изменить его тип на число. Все трюки в других ответах (например, унарный плюс) подразумевают неявное принуждение типа строки к числу. Вы также можете сделать то же самое с помощью функции Number.

Синтаксический

Var parsed = parseInt("97", 10);

parseInt и parseFloat - это две функции, используемые для разбора строк на числа. Синтаксический анализ остановится молча, если он попадет в символ, который он не распознает, что может быть полезно для синтаксического анализа строк, например "92px", но это также несколько опасно, поскольку оно не даст вам никакой ошибки при плохом вводе, вместо этого вы "вернем NaN, если строка не начинается с числа. Пробел в начале строки игнорируется. Вот пример того, что он делает что-то по-другому, что вам нужно, и не указывает, что что-то пошло не так:

Var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

Хорошая практика всегда указывать в качестве второго аргумента. В старых браузерах, если строка начиналась с 0, она была бы интерпретирована как восьмеричная, если бы не было указано значение radix, которое привлекло много людей врасплох. Поведение для шестнадцатеричного запуска запускается, если строка начинается с 0x, если не указано значение radix. 0xff . Стандарт фактически изменился с помощью ecmascript 5, поэтому современные браузеры больше не запускают восьмеричные, когда указана ведущая 0, если не указано значение radix. parseInt понимает радики до основания 36, и в этом случае как верхние, так и строчные буквы обрабатываются как эквивалентные.

Изменение типа строки на число

Все другие трюки, упомянутые выше, которые не используют parseInt, подразумевают неявное принуждение строки к числу. Я предпочитаю делать это явно,

Var cast = Number("97");

Это отличается от методов анализа (хотя он все еще игнорирует пробелы). Он более строгий: если он не понимает всю строку, чем возвращает NaN , поэтому вы не можете использовать ее для строк типа 97px . Поскольку вам требуется примитивное число, а не объект обертки Number, убедитесь, что вы не ставите new перед функцией Number.

Очевидно, что преобразование в число дает вам значение, которое может быть float, а не целое число, поэтому, если вы хотите целое число, вам нужно его изменить. Есть несколько способов сделать это:

Var rounded = Math.floor(Number("97.654")); // other options are Math.ceil, Math.round var fixed = Number("97.654").toFixed(0); // rounded rather than truncated var bitwised = Number("97.654")|0; // do not use for large numbers

Любой побитовый оператор (здесь я поразрядный или, но вы также можете сделать двойное отрицание, как в более раннем ответе или бит-сдвиге) преобразует значение в 32-битное целое число, и большинство из них преобразуется в подписанный целое число. Обратите внимание, что этот не будет нужен для больших целых чисел . Если целое число не может быть представлено в 32 битах, оно будет завершено.

~~"3000000000.654" === -1294967296 // This is the same as Number("3000000000.654")|0 "3000000000.654" >>> 0 === 3000000000 // unsigned right shift gives you an extra bit "300000000000.654" >>> 0 === 3647256576 // but still fails with larger numbers

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

Math.floor("3000000000.654") === 3000000000 // This is the same as Math.floor(Number("3000000000.654"))

Имейте в виду, что все эти методы понимают экспоненциальную нотацию, поэтому 2e2 является 200 , а не NaN. Кроме того, Number понимает "Бесконечность", в то время как методы анализа не делают.

Пользовательский

Неверно, что любой из этих методов делает именно то, что вы хотите. Например, обычно мне нужна ошибка, возникающая при сбое синтаксического анализа, и мне не нужна поддержка Infinity, экспоненты или ведущие пробелы. В зависимости от вашего использования, иногда имеет смысл написать пользовательскую функцию преобразования.

Всегда проверяйте, что вывод Number или один из методов анализа - это число, которое вы ожидаете. Вы почти наверняка захотите использовать isNaN , чтобы убедиться, что число не NaN (обычно это единственный способ узнать, что синтаксический анализ не удалось).