Как преобразовать объект в строку javascript

Object.prototype.toString()

Метод toString() возвращает строку, представляющую объект.

Интерактивный пример

Синтаксис

obj.toString()

Возвращаемое значение

Строка, представляющая объект.

Описание

Каждый объект имеет метод toString() , автоматически вызывающийся, когда объект должен быть представлен в виде текстового значения или когда объект участвует в выражении, где ожидается строка. По умолчанию, метод toString() наследуется каждым объектом, произошедшим от объекта Object . Если этот метод не переопределён в пользовательском объекте, toString() возвращает строку вида «[object тип]», где тип — это тип объекта. Это иллюстрирует следующий код:

var o = new Object(); o.toString(); // вернёт [object Object] 

Примечание: начиная с JavaScript 1.8.5, метод toString() , вызванный на null , возвращает строку [object Null] , а вызванный для undefined , возвращает строку [object Undefined] , как определено в 5-м издании ECMAScript и последующих исправлениях. Смотрите пример использование метода toString() для определения типа объекта.

Примеры

Пример: переопределение метода toString по умолчанию

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

Следующий код определяет объект Dog и создаёт theDog , объект типа Dog :

function Dog(name, breed, color, sex)  this.name = name; this.breed = breed; this.color = color; this.sex = sex; > theDog = new Dog("Болтушка", "лабрадор", "шоколадный", "девочка"); 

Если вы вызовете метод toString() на этом пользовательском объекте, он вернёт значение по умолчанию, унаследованное от Object :

.toString(); // вернёт [object Object] 

Следующий код создаёт и присваивает метод dogToString() , переопределяющий метод toString() по умолчанию. Эта функция генерирует строку, содержащую кличку, породу, цвет и пол объекта, в форме » свойство = значение; «.

Dog.prototype.toString = function dogToString()  var ret = "Собачка " + this.name + " - " + this.sex + ", " + this.color + " " + this.breed; return ret; >; 

Dog.prototype.toString = function dogToString()  return `Dog $this.name> is a $this.sex> $this.color> $this.breed>`; >; 

После объявления этого метода, при любом использовании переменной theDog в строковом контексте, JavaScript будет автоматически вызывать функцию dogToString() , возвращающую следующую строку:

Собачка Болтушка - девочка, шоколадный лабрадор

Пример: использование метода toString для определения типа объекта

Метод toString() можно использовать с любым объектом для получения его класса. Для использования метода Object.prototype.toString() с любым объектом, вам необходимо вызвать на нём функции Function.prototype.call() или Function.prototype.apply() , передав объект, который вы хотите исследовать, первым параметром thisArg .

var toString = Object.prototype.toString; toString.call(new Date()); // [object Date] toString.call(new String()); // [object String] toString.call(Math); // [object Math] // Начиная с JavaScript 1.8.5 toString.call(undefined); // [object Undefined] toString.call(null); // [object Null] 

Спецификации

Specification
ECMAScript Language Specification # sec-object.prototype.tostring

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Object.prototype.toSource()
• Object.prototype.valueOf()
• Number.prototype.toString()
• Symbol.toPrimitive

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

JSON.stringify()

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

При отправке на сервер данные всегда передаются в виде строки.

Чтобы преобразовать объект JavaScript в строку, используется функция JSON.stringify().

Преобразование объекта JavaScript в строку

Допустим, что у нас есть следующий объект JavaScript:

 var obj = < "name":"John", "age":30, "city":"New York">; 

Воспользуемся JavaScript функцией JSON.stringify() и преобразуем его в строку:

 var myJSON = JSON.stringify(obj); 

В результате у нас будет строка, записанная по правилам JSON.

Теперь myJSON — готовая к отправке на сервер строка:

 var obj = < "name":"John", "age":30, "city":"New York">; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; 

Преобразование массива JavaScript в строку

Также, мы можем преобразовывать массивы JavaScript в JSON строки.

Допустим, что у нас есть следующий объект JavaScript:

 var arr = [ "John", "Peter", "Sally", "Jane" ]; 

Воспользуемся JavaScript функцией JSON.stringify() и преобразуем его в строку:

 var myJSON = JSON.stringify(arr); 

В результате у нас будет строка, записанная по правилам JSON.

Теперь myJSON — готовая к отправке на сервер строка:

 var arr = [ "John", "Peter", "Sally", "Jane" ]; var myJSON = JSON.stringify(arr); document.getElementById("demo").innerHTML = myJSON; 

Преобразование дат в строку

Объекты даты и времени (тип Date) нельзя использовать в JSON. Функция JSON.stringify() позволяет преобразовать любой объект даты в JSON строку.

 var obj = < "name":"John", "today":new Date(), "city":"New York">; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; 

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

Преобразование функций в строку

Функции нельзя использовать в JSON.

Функция JSON.stringify() удалит любую функцию из объекта JavaScript, и ключ, и значение:

 var obj = < "name":"John", "age":function () , "city":"New York">; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; 

Этого можно избежать, если преобразовать функцию в строку до того, как использовать функцию JSON.stringify().

 var obj = < "name":"John", "age":function () , "city":"New York">; obj.age = obj.age.toString(); var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; 

Внимание! Следует избегать использования функций в JSON, так как в этом случае теряется их область видимости, а для обратного преобразования приходится использовать функцию eval(), что нежелательно.

Поддержка браузерами

Функция JSON.stringify() включена во все основные браузеры и в последний стандарт ECMAScript (JavaScript).

Преобразование объекта в строку в JavaScript

Поскольку объекты JavaScript состоят из атрибутов в виде пар ключ-значение, заключенных в фигурные скобки, преобразование в строку должно быть корректным, особенно если нужна возможность обратного конвертирования. Преобразование может пригодиться, когда речь идет о хранении данных в локальном хранилище или базе данных.

Существуют различные способы преобразования объекта JavaScript в строку.

JSON.stringify()

Это мощная и часто используемая функция для преобразования объекта в строку JSON.

let object = < name: 'Иван', age: 45, friends: ['Петр', 'Олег'] >; JSON.stringify(object); // ''

Object.entries()

Object.entries() — это встроенная функция JavaScript, которая разбивает объект на массив из пар ключ-значение. Как следствие, мы можем перебрать такой массив и вручную преобразовать объект JavaScript в строку. С чем нужно определиться — какой разделитель будет между парами и элементами пар.

let object = < name: 'Иван', age: 45 >; let arrayOfArrays = Object.entries(object); // [['name', 'Иван'], ['age', 45]] let arrayOfStrings = arrayOfArrays.map( item => item.join(':')); // ['name:Иван', 'age:45'] let string = arrayOfStrings.join(','); // 'name:Иван,age:45' let searchParameters = '?' + Object.entries(object).map( item => item.join('=')).join('&'); // '?name=Иван&age=45'

Object.keys()

Object.keys() возвращает массив, содержащий все ключи объекта. После мы можем перебрать их с помощью цикла и сформировать строчную версию объекта.

let object = < name: 'Иван', age: 45 >; let arrayOfKeys = Object.keys(object); // ['name', 'age'] let string = ''; for (key of arrayOfKeys) < string += `$:$,`; >; console.log(string); // => 'name:Иван,age:45,'

Преобразование объектов: toString и valueOf

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/object-toprimitive.

Ранее, в главе Преобразование типов для примитивов мы рассматривали преобразование типов для примитивов. Теперь добавим в нашу картину мира объекты.

Бывают операции, при которых объект должен быть преобразован в примитив.

• Строковое преобразование – если объект выводится через alert(obj) .
• Численное преобразование – при арифметических операциях, сравнении с примитивом.
• Логическое преобразование – при if(obj) и других логических операциях.

Рассмотрим эти преобразования по очереди.

Логическое преобразование

Проще всего – с логическим преобразованием.

Любой объект в логическом контексте – true , даже если это пустой массив [] или объект <> .

Строковое преобразование

Строковое преобразование проще всего увидеть, если вывести объект при помощи alert :

var user = < firstName: 'Василий' >; alert( user ); // [object Object]

Как видно, содержимое объекта не вывелось. Это потому, что стандартным строковым представлением пользовательского объекта является строка «[object Object]» .

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

Если в объекте присутствует метод toString , который возвращает примитив, то он используется для преобразования.

var user = < firstName: 'Василий', toString: function() < return 'Пользователь ' + this.firstName; >>; alert( user ); // Пользователь Василий

Результатом toString может быть любой примитив

Метод toString не обязан возвращать именно строку.

Его результат может быть любого примитивного типа. Например, это может быть число, как в примере ниже:

var obj = < toString: function() < return 123; >>; alert( obj ); // 123

Поэтому мы и называем его здесь «строковое преобразование», а не «преобразование к строке».

Все объекты, включая встроенные, имеют свои реализации метода toString , например:

alert( [1, 2] ); // toString для массивов выводит список элементов "1,2" alert( new Date ); // toString для дат выводит дату в виде строки alert( function() <> ); // toString для функции выводит её код

Численное преобразование

Для численного преобразования объекта используется метод valueOf , а если его нет – то toString :

var room = < number: 777, valueOf: function() < return this.number; >, toString: function() < return this.number; >>; alert( +room ); // 777, вызвался valueOf delete room.valueOf; // valueOf удалён alert( +room ); // 777, вызвался toString

Метод valueOf обязан возвращать примитивное значение, иначе его результат будет проигнорирован. При этом – не обязательно числовое.

У большинства объектов нет valueOf

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

Исключением является объект Date , который поддерживает оба типа преобразований:

alert( new Date() ); // toString: Дата в виде читаемой строки alert( +new Date() ); // valueOf: кол-во миллисекунд, прошедших с 01.01.1970

Детали спецификации

Если посмотреть в стандарт, то в пункте 15.2.4.4 говорится о том, что valueOf есть у любых объектов. Но он ничего не делает, просто возвращает сам объект (непримитивное значение!), а потому игнорируется.

Две стадии преобразования

Итак, объект преобразован в примитив при помощи toString или valueOf .

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

Например, рассмотрим применение к объекту операции == :

var obj = < valueOf: function() < return 1; >>; alert( obj == true ); // true

Объект obj был сначала преобразован в примитив, используя численное преобразование, получилось 1 == true .

Далее, так как значения всё ещё разных типов, применяются правила преобразования примитивов, результат: true .

То же самое – при сложении с объектом при помощи + :

var obj = < valueOf: function() < return 1; >>; alert( obj + "test" ); // 1test

Или вот, для разности объектов:

var a = < valueOf: function() < return "1"; >>; var b = < valueOf: function() < return "2"; >>; alert( a + b ); // "12" alert( a - b ); // "1" - "2" = -1

Исключение: Date

Объект Date по историческим причинам является исключением.

Бинарный оператор плюс + обычно использует численное преобразование и метод valueOf . Как мы уже знаем, если подходящего valueOf нет (а его нет у большинства объектов), то используется toString , так что в итоге преобразование происходит к строке. Но если есть valueOf , то используется valueOf . Выше в примере как раз a + b это демонстрируют.

У объектов Date есть и valueOf – возвращает количество миллисекунд, и toString – возвращает строку с датой.

…Но оператор + для Date использует именно toString (хотя должен бы valueOf ).

Это и есть исключение:

// бинарный плюс для даты toString, для остальных объектов valueOf alert( new Date + "" ); // "строка даты"

Других подобных исключений нет.

Как испугать Java-разработчика

В языке Java (это не JavaScript, другой язык, здесь приведён для примера) логические значения можно создавать, используя синтаксис new Boolean(true/false) , например new Boolean(true) .

В JavaScript тоже есть подобная возможность, которая возвращает «объектную обёртку» для логического значения.

Эта возможность давно существует лишь для совместимости, она и не используется на практике, поскольку приводит к странным результатам. Некоторые из них могут сильно удивить человека, не привыкшего к JavaScript, например:

var value = new Boolean(false); if (value) < alert( true ); // сработает! >

Почему запустился alert ? Ведь в if находится false … Проверим:

var value = new Boolean(false); alert( value ); // выводит false, все ок.. if (value) < alert( true ); // ..но тогда почему выполняется alert в if . >

Дело в том, что new Boolean – это не примитивное значение, а объект. Поэтому в логическом контексте он преобразуется к true , в результате работает первый пример.

А второй пример вызывает alert , который преобразует объект к строке, и он становится «false» .

В JavaScript вызовы new Boolean/String/Number не используются, а используются простые вызовы соответствующих функций, они преобразуют значение в примитив нужного типа, например Boolean(val) === !!val .

Итого

• В логическом контексте объект – всегда true .
• При строковом преобразовании объекта используется его метод toString . Он должен возвращать примитивное значение, причём не обязательно именно строку.
• Для численного преобразования используется метод valueOf , который также может возвратить любое примитивное значение. У большинства объектов valueOf не работает (возвращает сам объект и потому игнорируется), при этом для численного преобразования используется toString .

Полный алгоритм преобразований есть в спецификации ECMAScript, смотрите пункты 11.8.5, 11.9.3, а также 9.1 и 9.3.

Заметим, для полноты картины, что некоторые тесты знаний в интернет предлагают вопросы типа:

<>[0] // чему равно? <> + <> // а так?

Если вы запустите эти выражения в консоли, то результат может показаться странным. Подвох здесь в том, что если фигурные скобки <. >идут не в выражении, а в основном потоке кода, то JavaScript считает, что это не объект, а «блок кода» (как if , for , но без оператора просто группировка команд вместе используется редко).

Вот блок кода с командой:

А если команду изъять, то будет пустой блок <> , который ничего не делает. Два примера выше как раз содержат пустой блок в начале, который ничего не делает. Иначе говоря:

<>[0] // то же что и: [0] <> + <> // то же что и: + <>

То есть, такие вопросы – не на преобразование типов, а на понимание, что если < . >находится вне выражений, то это не объект, а блок.