Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

toString() JS: Введение в ООП

В прототипе объектов JavaScript есть один "магический метод" Object.prototype.toString(). Магический он потому, что он вызывается автоматически в тех местах, где объект используется как строка. Такое регулярно происходит во время разработки, мы все видели надписи наподобие этой: '[object Object]'.

const company = { name: 'Hexlet' };
company.toString(); // "[object Object]"
// Использование объекта в строке приводит к автоматическому вызову
console.log(`I love ${company}!`); // "I love [object Object]!"

Для чего же он нужен? В веб-разработке объекты часто приводятся к строке, например, при выводе на экран пользователю или при передаче данных между разными приложениями. Представьте себе список чего-либо, например список курсов на Хекслете. Вывод имени каждого курса может быть сделан так:

// Синтаксис фреймворка React
<h2>{course.name}</h2>
// вывод
// <h2>Hexlet</h2>

Но если определить toString(), то код упрощается:

// Синтаксис фреймворка React
<h2>{course}</h2>
// вывод
// <h2>Hexlet</h2>

Преимущество здесь не только в более короткой записи, но и в том, что разных вариантов вывода, как правило, много. Даже когда мы занимаемся отладкой, нам нужен вывод в лог. Во всех этих ситуациях наличие toString() упрощает работу, так как не нужно явно преобразовывать объекты к строке. Кроме того, в будущем достаточно изменить ровно одно место, чтобы вывод поменялся во всех местах.

Сам по себе toString() не является чем-то особенным, это обычный метод в прототипе. А раз так, то мы можем переопределить его:

const company = {
  name: 'Hexlet',
  toString() {
    return this.name;
  },
};

company.toString(); // "Hexlet"
console.log(`I love ${company}!`); // "I love Hexlet!"

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

function Company(name) {
  this.name = name;
};

Company.prototype.toString = function toString() {
  return this.name;
}

const company = new Company('Hexlet');
console.log(`I love ${company}!`); // "I love Hexlet!"

Но что делать, если нужно вывести объект "как есть"? Такое бывает нужно для анализа внутренней структуры. Если у этого объекта не определен toString(), то мы получим максимально неинформативный вывод [object Object]. В таком случае можно конвертировать объект в JSON:

const company = new Company('Hexlet');
// JSON – это строка!
console.log(JSON.stringify(company)); // => '{"name":"Hexlet"}'

Дополнительные материалы

  1. Документация

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»