Метод toString() в JavaScript: Магия превращения данных

Сегодня разбираем один из самых незаметных, но важнейших «кирпичиков» в фундаменте JavaScript — метод toString().

Если вы пишете на JavaScript, вы используете его каждый день, даже не замечая этого. Но знаете ли вы, как он работает на самом деле и как заставить его делать то, что нужно вам? Поехали.

Что это за зверь?

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

Грубо говоря, вы говорите компьютеру: «Объясни эту сущность человеческим языком (в виде текста)».

Синтаксис простой:

что-то.toString()

Как это работает на пальцах

Давайте посмотрим на простые типы данных:

let number = 123;

console.log(number.toString()); // "123"

let bool = true;

console.log(bool.toString()); // "true"

let array = [1, 2, 3];

console.log(array.toString()); // "1,2,3"

let date = new Date();

console.log(date.toString()); // "Wed Dec 13 2023 15:30:00 GMT+0300"

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

Секрет, который знают не все

А теперь магия. Вы можете переопределить метод toString() у своих объектов!

Представьте, что вы описываете пользователя сайта:

Согласитесь, «[object Object]» — это не те сведения, которые вы хотели бы увидеть. Давайте исправим это:

Вы только что превратили кучку данных в читаемую фразу. Это мощно.

Где это происходит неявно (автоматически)

Самое интересное — во многих случаях вам не нужно вызывать toString() вручную. JavaScript делает это за кулисами.

1. Конкатенация (сложение строки с чем-то):

let number = 10;

let text = "Ваш возраст: " + number; // JavaScript сам вызвал toString у number

2. Шаблонные строки:

let obj = { name: "Макс" };

console.log(`Данные: ${obj}`); // Вызовет obj.toString()

Справка: Шаблонные строки (template literals) в JavaScript — это особый вид строк, который позволяет встраивать значения переменных или выражений непосредственно внутрь строки без использования оператора конкатенации или сложных манипуляций со строками. Они появились в стандарте ES6 (ECMAScript 2015) и значительно упростили работу с текстовыми данными.

Важное предупреждение (подводный камень)

Всегда помните про null и undefined.

let empty = null;

// empty.toString(); // Ошибка! Uncaught TypeError: Cannot read property 'toString' of null

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

Продвинутый вариант: Числовые системы

У метода Number.toString() есть секретный аргумент — radix (основание системы счисления).

Хотите перевести число в двоичный код (бинарный)?

let num = 255;

console.log(num.toString(2)); // "11111111" (двоичная)

console.log(num.toString(16)); // "ff" (шестнадцатеричная)

Отличная фича для задачек на собеседованиях.

Вердикт

toString() — это невидимый герой. Он берет на себя всю грязную работу по преобразованию данных для консоли, интерфейса или логирования.

✔ Запомните правила хорошего тона:

• Всегда переопределяйте toString у ваших классов/объектов, чтобы они говорили что-то осмысленное.
• Не вызывайте toString() у null или undefined.
• Используйте radix для магии с системами счисления.

Когда в следующий раз увидите в консоли [object Object], вы уже будете знать, как это исправить.

На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.