В прототипе объектов 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"}'
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт