JavaScript: как преобразовать число в строку number to string методы и примеры

[kirilljsx]

В JavaScript часто приходится преобразовывать число в строку. Это нужно для вывода данных, работы с DOM, отправки на сервер или конкатенации строк. Такие преобразования помогают избежать ошибок вроде “55123” вместо 55123.

Знание методов String(), toString() и шаблонных строк упрощает код. Мы разберем основные способы, примеры и подводные камни. Это сэкономит время на отладку и сделает скрипты надежнее.

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

Преобразование числа в строку в JavaScript выполняется несколькими способами. Самые популярные — это глобальная функция String() и метод toString() у числовых значений. Они работают быстро и предсказуемо для большинства случаев.

Функция String(value) принимает любое значение и возвращает его строковое представление. Для чисел она просто оборачивает цифры в кавычки, сохраняя точность. Метод toString(radix) более гибкий — позволяет указать систему счисления от 2 до 36. Без radix используется десятичная система по умолчанию.

Представьте: у вас есть число 42, и нужно вывести его в alert или вставить в HTML. Без преобразования может получиться конкатенация вместо сложения. Давайте посмотрим на код.

• String(42) вернет “42” — простой и универсальный способ для любого типа данных.
• 42.toString() тоже даст “42”, но работает только с числами и требует проверки на null/undefined.
• 42.toString(16) преобразует в hex: “2a” — полезно для цветов или низкоуровневых операций.

Метод	Синтаксис	Пример	Особенности
String()	String(число)	String(123) → “123”	Работает с NaN (“NaN”), null (“null”)
toString()	число.toString()	123.toString() → “123”	Ошибка для undefined, radix от 2-36
Шаблонная строка	${число}	${123} → “123”	Автоматическое преобразование

Метод toString() и его возможности

Метод toString() — это встроенный способ у объектов Number. Он преобразует число в строку, optionally меняя систему счисления. По умолчанию radix равен 10 (десятичная), но можно передать значение от 2 до 36 для binary, octal, hex и т.д.

Это удобно для отладки или когда нужно представить число в другом формате. Например, в веб-разработке hex используется для CSS-цветов. Важный нюанс: метод выбрасывает ошибку RangeError, если radix вне диапазона 2-36 или для специальных значений вроде Infinity.

Проверим на примерах. Возьмем число 42 и преобразуем в разные системы.

const num = 42;
console.log(num.toString(10));  // "42" (десятичная)
console.log(num.toString(2));   // "101010" (binary)
console.log(num.toString(16));  // "2a" (hex)
console.log(num.toString(8));   // "52" (octal)

• Для отрицательных чисел: (-42).toString() → “-42” — знак сохраняется.
• С дробными числами: (3.14).toString() → “3.14” — дробная часть остается.
• Infinity.toString() → “Infinity”, NaN.toString() → “NaN”.

Число	radix=2	radix=8	radix=16	radix=36
42	“101010”	“52”	“2a”	“16”
255	“11111111”	“377”	“ff”	“7b”
3.14	“3.14”	“3.14”	“3.14”	“3.14”

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

Глобальная функция String() — универсальный инструмент для приведения любого значения к строке. Для чисел она вызывает внутренне toString(), но безопаснее для неопределенных значений. Автоматическое преобразование происходит в alert(), console.log() или при + со строкой.

Например, при конкатенации строк JavaScript сам преобразует число: "Возраст: " + 25 → “Возраст: 25”. Но в выражениях вроде “5” + 5 получается “55”, а не 10. Поэтому явное преобразование контролирует поведение.

Вот практические примеры:

let age = 30;
let message = "Мне " + age;  // Автоматически: "Мне 30"
let explicit = "Мне " + String(age);  // То же самое

console.log(String(NaN));  // "NaN"
console.log(String(Infinity));  // "Infinity"

• Пробелы и спецсимволы: String(123) не добавляет лишнего, но для форматирования используйте toFixed().
• Шаблонные строки ${age} — современный способ, всегда преобразует автоматически.
• Сравнение: String() быстрее toString() для массивов/объектов, но для чистых чисел разница минимальна.

Сценарий	String()	toString()	Шаблон ${}
Простое число	“123”	“123”	“123”
Отрицательное	“-123”	“-123”	“-123”
С ошибкой	Работает	RangeError для undefined	Работает

Шаблонные строки и другие хитрости

Шаблонные строки с обратными кавычками — элегантный способ преобразования. Они интерполируют выражения автоматически, без явных вызовов функций. Это упрощает код для HTML, JSON или логов.

Плюс, есть методы вроде toFixed(n) для строкового представления с фиксированным количеством знаков после запятой. Или toLocaleString() для локализованных чисел (с разделителями тысяч). Они возвращают строки с нужным форматированием.

Примеры в действии:

const price = 1234.56;
console.log(`Цена: ${price}`);  // "Цена: 1234.56"
console.log(price.toFixed(2));  // "1234.56"
console.log(price.toLocaleString('ru'));  // "1 234,56"

• toFixed(0) округляет до целого: 3.9.toFixed(0) → “4”.
• toPrecision(n) для полной точности: 3.14159.toPrecision(4) → “3.142”.
• Локализация: полезно для международных приложений.

Метод	Результат для 1234.56	Когда использовать
toFixed(2)	“1234.56”	Деньги, цены
toLocaleString(‘en’)	“1,234.56”	Английский формат
toLocaleString(‘ru’)	“1 234,56”	Русский формат

Когда выбор метода решает всё

В реальных проектах выбор зависит от контекста. Для простоты берите String() или шаблоны. toString(radix) — для систем счисления. Избегайте неявных преобразований в математике, чтобы не ловить баги.

Осталось упомянуть edge-кейсы вроде BigInt (n.toString()), но базовые числа покрыты. Подумать стоит над производительностью в циклах и обработкой пользовательского ввода из форм.