Custom numeric format strings

Функции parseFloat() и parseInt()

В 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) принимает в качестве первого аргумента строку, анализирует её и возвращает целое число (тип 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, это обезопасит Ваш код от неожиданных результатов.

Можете испробовать работу этих функций в примере ниже:

Пример

Введите строку:
Результат:

Hexadecimal

String.prototype.includes()

JavaScript interprets numeric constants as hexadecimal if they are preceded by
0x.

Example

var x = 0xFF; // x will be 255

Never write a number with a leading zero (like 07).Some JavaScript versions interpret
numbers as octal if they are written with a leading zero.

By default, JavaScript displays numbers as base 10 decimals.

But you can use the method to output numbers from base 2
to base 36.

Hexadecimal is base 16. Decimal is base 10.
Octal is base 8. Binary is base 2.

Example

var myNumber = 32;myNumber.toString(10);  // returns 32myNumber.toString(32);  // returns
10
myNumber.toString(16);  // returns 20
myNumber.toString(8);   // returns 40
myNumber.toString(2);   // returns 100000

Примеры

Метод charat() в java

Вооружившись теорией, давайте вернёмся к нашим примерам:

true + false             // 112 / "6"                 // 2"number" + 15 + 3        // 'number153'15 + 3 + "number"        // '18number' > null               // true"foo" + + "bar"          // 'fooNaN''true' == true           // falsefalse == 'false'         // falsenull == ''               // false!!"false" == !!"true"    // true == 'x'             // true [] + null + 1            // 'null1' ==        // false{}+[]+{}+             // '01'!+[]+[]+![]              // 'truefalse'new Date(0) - 0          // 0new Date(0) + 0          // 'Thu Jan 01 1970 02:00:00(EET)0'

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

Бинарный оператор вызывает численное преобразование для и :

true + false==> 1 + 0==> 1

Оператор деления вызывает численное преобразование строки :

12 / '6'==> 12 / 6==>> 2

Оператор выполняется слева направо, поэтому сначала выполнится выражение . Поскольку один из операндов это строка, оператор вызовет строковое преобразование числа и последующую конкатенацию двух строк. На следующем этапе выражение выполнится таким же образом.

“number” + 15 + 3 ==> "number15" + 3 ==> "number153"

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

15 + 3 + "number" ==> 18 + "number" ==> "18number"

Оператор сравнения вызывает численное преобразование для и

 > null==> '1' > 0==> 1 > 0==> true

Унарный оператор имеет более высокий приоритет чем бинарный оператор . Поэтому выражение выполняется первым. Унарный плюс вызывает численное преобразования строки . Так как эта строка не представляет собой корректное число, результатом будет . Следующим шагом выполнится выражение .

"foo" + + "bar" ==> "foo" + (+"bar") ==> "foo" + NaN ==> "fooNaN"

Оператор сравнения вызывает численное преобразование, поэтому строка конвертируется в , а правый операнд станет .

'true' == true==> NaN == 1==> falsefalse == 'false'   ==> 0 == NaN==> false

Оператор обычно вызывает численное преобразование, но не в случае с . Действует исключение из правил: равен только или и ничему другому.

null == ''==> false

Оператор конвертирует строки и в булевое значение , так как это не пустые строки. А дальше оператор просто сравнивает два булевых значения безо всяких преобразований.

!!"false" == !!"true"  ==> true == true==> true

Оператор вызывает численное преобразование для массива. Метод массива возвращает сам массив, а значит результат игнорируется, так как не является примитивом. Далее, вызывается метод массива , который конвертирует в строку .

 == 'x'  ==> 'x' == 'x'==>  true

Оператор вызывает численное преобразование массива. Метод массива вернёт сам массив, поэтому результат игнорируется, поскольку не является примитивом.

Далее выполняется выражение .

[] + null + 1  ==>  '' + null + 1  ==>  'null' + 1  ==> 'null1'

Логические операторы и преобразовывают операнды к булевому значению, но всегда возвращают оригинальное значение операнда (не булевое). станет , а поскольку является не пустой строкой, то конвертируется в . пустой объект тоже становится .

0 || "0" && {}  ==>  (0 || "0") && {}==> (false || true) && true  // internally==> "0" && {}==> true && true             // internally==> {}

 == ==>  false

Все операнды являются не примитивами, поэтому вызывает численное преобразование. Методы и возвращают самих себя, соответственно будут проигнорированы. В качестве запасного варианта, вызывается метод . Трюк в том, что первый воспринимается движком не как создание объекта, а как объявление пустого блока кода и поэтому игнорируется. Выполнение начинается с выражения , которое преобразуется в пустую строку посредством метода , и далее в .

{}+[]+{}+==> +[]+{}+==> 0 + {} + ==> 0 + '' + ==> '0' + ==> '0' + '1'==> '01'

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

!+[]+[]+![]  ==> (!+[]) + [] + (![])==> !0 + [] + false==> true + [] + false==> true + '' + false==> 'truefalse'

Оператор вызывает численное преобразование для объекта . возвращает количество миллисекунд прошедших с начала Unix эпохи (в данном случае ).

new Date(0) - 0==> 0 - 0==> 0

Оператор вызывает преобразование по умолчанию. , как исключение, подразумевает строковое преобразование, поэтому используется метод , а не .

new Date(0) + 0==> 'Thu Jan 01 1970 02:00:00 GMT+0200 (EET)' + 0==> 'Thu Jan 01 1970 02:00:00 GMT+0200 (EET)0'

Adding Numbers and Strings

Javascript метод tofixed()

WARNING !!

JavaScript uses the + operator for both addition and concatenation.

Numbers are added. Strings are concatenated.

If you add two numbers, the result will be a number:

Example

var x = 10;
var y = 20;
var z = x + y; // z will be 30 (a number)

If you add two strings, the result will be a string concatenation:

Example

var x = «10»;
var y = «20»;
var z = x + y; // z will be 1020 (a string)

If you add a number and a string, the result will be a string concatenation:

Example

var x = 10;
var y = «20»;
var z = x + y; // z will be 1020 (a string)

If you add a string and a number, the result will be a string concatenation:

Example

var x = «10»;
var y = 20;
var z = x + y; // z will be 1020 (a string)

A common mistake is to expect this result to be 30:

Example

var x = 10;
var y = 20;
var z = «The result is: » + x + y;

A common mistake is to expect this result to be 102030:

Example

var x = 10;
var y = 20;
var z = «30»;
var result = x + y + z;

The JavaScript interpreter works from left to right.

First 10 + 20 is added because x and y are both numbers.

Then 30 + «30» is concatenated because z is a string.

NaN — Not a Number

is a JavaScript reserved word indicating that a number is not a legal number.

Trying to do arithmetic with a non-numeric string will result in (Not a
Number):

var x = 100 / «Apple»;
// x will be NaN (Not a Number)

However, if the string contains a numeric value , the result will be a
number:

var x = 100 / «10»;
// x will be 10

You can use the global JavaScript function to find out if a value is a number:

var x = 100 / «Apple»;isNaN(x); // returns true because x is Not a Number

Watch out for . If you use in a mathematical operation, the result will also be :

var x = NaN;
var y = 5;
var z = x + y;
// z will be NaN

Or the result might be a concatenation:

var x = NaN;
var y = «5»;
var z = x + y; // z will be NaN5

is a number: returns :

Особенности числовой арифметики

В JavaScript
число представлено в виде 64-битного формата IEEE-754. Для хранения числа
используется 64 бита: 52 из них используется для хранения цифр, 11 из них для
хранения положения десятичной точки (если число целое, то хранится 0), и один
бит отведён на хранение знака. Если число слишком большое, оно переполнит
64-битное хранилище, JavaScript вернёт бесконечность:

console.log( 1e500 ); // Infinity

Наиболее часто
встречающаяся ошибка при работе с числами в JavaScript – это потеря точности.
Например, сумма двух таких вещественных чисел:

let res = 0.1+0.2;
console.log( res );

не дает точное
значение 0,3. Потому, например, при таком сравнении:

if(res == 0.3) console.log( true );

мы получим
значение false и оператор
после if выполнен не
будет. Почему так происходит? Не вдаваясь в подробности, можно сказать так:
вещественные числа 0.1 и 0.3 в двоичной системе счисления (именно так они
представляются в памяти ЭВМ) являются бесконечной дробью. Отсюда и потеря
точности.

Проверка на NaN

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

Если вы действительно хотите применить произвольное значения для любой арифметической операции, тогда убедитесь, что это значение не NaN.

Использование оператора для проверки типа для вернет значение . Для проверки же на значение вы можете использовать глобальную функцию или даже предпочтительней будет использовать функцию , добавленную в ES6:

Вы можете проверить на значение следующим образом

Функция выше очень похожа на реализацию функции , добавленную в ES6, и следовательно, ее можно использовать в качестве полифила для сред выполнения, отличных от ES6, следующим образом:

В заключение вы можете усилить проверку с помощью , добавленную в ES6 для проверки на значение . Функция позволяет проверить, что два переданных в нее значения это одно и то же значение:

Finding a String in a String

The method returns the index of (the position of)
the occurrence of a specified text in a string:

var str = «Please locate where ‘locate’ occurs!»;
var pos = str.indexOf(«locate»);

JavaScript counts positions from zero.0 is the first position in a
string, 1 is the second, 2 is the third …

The method returns the index of the last
occurrence of a specified text in a string:

var str = «Please locate where ‘locate’ occurs!»;
var pos = str.lastIndexOf(«locate»);

Both , and return -1 if the text is not found.

var str = «Please locate where ‘locate’ occurs!»;
var pos = str.lastIndexOf(«John»);

Both methods accept a second parameter as the starting position for the
search:

var str = «Please locate where ‘locate’ occurs!»;
var pos = str.indexOf(«locate», 15);

The methods searches backwards
(from the end to the beginning), meaning:
if the second parameter is , the search starts at position
15, and searches to the beginning of the string.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
cos()
cosh()
E
exp()
floor()
LN2
LN10
log()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Escape Character

Because strings must be written within quotes, JavaScript will misunderstand this string:

var x = «We are the so-called «Vikings» from the north.»;

The string will be chopped to «We are the so-called «.

The solution to avoid this problem, is to use the backslash escape character.

The backslash () escape character turns special characters into string characters:

Code	Result	Description
\’	‘	Single quote
\»	«	Double quote
\\	\	Backslash

The sequence inserts a double quote in a string:

Example

var x = «We are the so-called \»Vikings\» from the north.»;

The sequence inserts a single quote in a string:

Example

var x = ‘It\’s alright.’;

The sequence inserts a backslash in a string:

Example

var x = «The character \\ is called backslash.»;

Six other escape sequences are valid in JavaScript:

Code	Result
\b	Backspace
\f	Form Feed
\n	New Line
\r	Carriage Return
\t	Horizontal Tabulator
\v	Vertical Tabulator

The 6 escape characters above were originally designed to control
typewriters, teletypes, and fax machines. They do not make any sense in HTML.

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

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

Любое значение, которое интерпретируется как пустое, например, число 0, пустая строка, значения undefined, NaN или null преобразуются в значение false.

Другие значения, включая строковые литералы, состоящие из пробелов, будут преобразованы в true.

Обратите внимание: строковый литерал «0» преобразовывается в true, поскольку это не пустое значение:

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

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

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

Чтобы явно преобразовать значение в строку, вызовите метод String() или n.toString().

Попробуйте преобразовать логическое значение true в строку с помощью String().

Это вернет строковый литерал «true».

Также можно попробовать передать функции число:

Она вернет строковый литерал:

Теперь попробуйте использовать String() с переменной. Присвойте числовое значение переменной odyssey и используйте оператор typeof, чтобы проверить тип.

На данный момент переменной odyssey присвоено числовое значение 2001. Оператор typeof подтверждает, что значение является числом.

Теперь присвойте переменной odyssey ее эквивалент внутри функции String(), а затем используйте typeof, чтобы убедиться, что значение переменной успешно преобразовано из числа в строку.

Как видите, теперь переменная odyssey содержит строку.

Функция n.toString() работает аналогичным образом. Замените n переменной.

Переменная blows будет содержать строку.

Вместо переменной можно поместить значение в круглых скобках:

String() и n.toString() явно преобразовывают логические и числовые значения в строки.

isFinite и isNaN

Если по каким-то
причинам результатом вычислений становятся значения Infinite или NaN, то было бы
полезно иметь функции, которые бы умели «узнавать» такие выражения. Этими
функциями как раз и являются isFinite и isNaN. Например:

console.log( isNaN(NaN) );       // true
console.log( isNaN("1") );        // false
console.log( isNaN(2) );          // false
console.log( isNaN("abc") );    // true

По аналогии
работает и вторая функция isFinit:

console.log( isFinite("15") ); // true
console.log( isFinite("str") ); // false, потому что специальное значение: NaN
console.log( isFinite(Infinity) ); // false

Как видим, она
возвращает true, если это число
и оно ограничено (не бесконечно) и false в других
случаях.

Кстати, иногда
isFinite используется для проверки: содержится ли в строке число:

let num = prompt("Enter a number", '');
if( isFinite(num) ) console.log("это число");
else console.log("это не число");

Правда, если num будет пустой
строкой, то эта функция решит, что это число 0 (так как пустая строка
приводится к числу 0). Поэтому, более точная проверка будет такой:

if( num.length >  && isFinite(num) ) console.log("это число");
else console.log("это не число");

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

Источники

Я бы хотел порекомендовать отличную книгу “Understanding ES6” написанную Nicholas C. Zakascholas. Книга является отличным ресурсом для изучения ES6 с достаточным уровнем освещения: не слишком поверхностно, и в тоже время не погружается в механику работы движка черезчур.

Ещё одна отличная книга, на этот раз по ES5 — SpeakingJS написанная Axel Rauschmayer.

Современный учебник Javascript — https://learn.javascript.ru/,

в особенности эти две страницы, посвящённые преобразованию типов.

JavaScript Comparison Table — https://dorey.github.io/JavaScript-Equality-Table/

wtfjs — небольшой блог о языке, который мы все так любим, не смотря на то что он дает много поводов его ненавидеть — https://wtfjs.com/