Форматирование данных JavaScript/pretty printer
https://stackoverflow.com/questions/130404
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я пытаюсь найти способ pretty print структура данных JavaScript в удобочитаемой форме для отладки.
У меня довольно большая и сложная структура данных, хранящаяся в JS, и мне нужно написать некоторый код, чтобы манипулировать ею.Чтобы понять, что я делаю и где я ошибаюсь, что мне действительно нужно, так это иметь возможность видеть структуру данных во всей ее полноте и обновлять ее всякий раз, когда я вношу изменения через пользовательский интерфейс.
Со всем этим я могу справиться сам, за исключением того, что нашел хороший способ преобразовать структуру данных JavaScript в удобочитаемую строку.Подошел бы JSON, но он действительно должен быть красиво отформатирован и с отступами.Обычно я бы использовал для этого отличный материал для сброса DOM от Firebug, но мне действительно нужно иметь возможность видеть всю структуру сразу, что, похоже, невозможно в Firebug.
Любые предложения приветствуются.
Заранее благодарю.
Решение
Я написал функцию для вывода JS-объекта в удобочитаемой форме, хотя выходные данные не имеют отступов, но добавить это не должно быть слишком сложно:Я создал эту функцию из той, которую я создал для Lua (которая намного сложнее), которая решала эту проблему с отступами.
Вот "простая" версия:
function DumpObject(obj)
{
var od = new Object;
var result = "";
var len = 0;
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
value = "'" + value + "'";
else if (typeof value == 'object')
{
if (value instanceof Array)
{
value = "[ " + value + " ]";
}
else
{
var ood = DumpObject(value);
value = "{ " + ood.dump + " }";
}
}
result += "'" + property + "' : " + value + ", ";
len++;
}
od.dump = result.replace(/, $/, "");
od.len = len;
return od;
}
Я подумаю о том, чтобы немного улучшить его.
Примечание 1:Чтобы использовать его, сделайте od = DumpObject(something) и используйте od.dump.Запутанный, потому что я тоже хотел использовать значение len (количество элементов) для другой цели.Тривиально заставить функцию возвращать только строку.
Примечание 2:он не обрабатывает циклы в ссылках.
Редактировать
Я сделал версию с отступом.
function DumpObjectIndented(obj, indent)
{
var result = "";
if (indent == null) indent = "";
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
value = "'" + value + "'";
else if (typeof value == 'object')
{
if (value instanceof Array)
{
// Just let JS convert the Array to a string!
value = "[ " + value + " ]";
}
else
{
// Recursive dump
// (replace " " by "\t" or something else if you prefer)
var od = DumpObjectIndented(value, indent + " ");
// If you like { on the same line as the key
//value = "{\n" + od + "\n" + indent + "}";
// If you prefer { and } to be aligned
value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
}
}
result += indent + "'" + property + "' : " + value + ",\n";
}
return result.replace(/,\n$/, "");
}
Выберите нужный отступ в строке с помощью рекурсивного вызова и оформите стиль фигурной скобки, переключив закомментированную строку после этой.
...Я вижу, ты придумал свою собственную версию, и это хорошо.У посетителей будет выбор.
Другие советы
Использование JSON Крокфорда.stringify вот так:
var myArray = ['e', {pluribus: 'unum'}];
var text = JSON.stringify(myArray, null, '\t'); //you can specify a number instead of '\t' and that many spaces will be used for indentation...
Переменная text это выглядело бы примерно так:
[
"e",
{
"pluribus": "unum"
}
]
Кстати, для этого не требуется ничего большего, чем этот JS-файл - он будет работать с любой библиотекой и т.д.
Вы можете использовать следующее
<pre id="dump"></pre>
<script>
var dump = JSON.stringify(sampleJsonObject, null, 4);
$('#dump').html(dump)
</script>
В Firebug, если вы просто console.debug ("%o", my_object) вы можете нажать на него в консоли и войти в интерактивный обозреватель объектов.Он показывает весь объект целиком и позволяет разворачивать вложенные объекты.
Для тех, кто ищет потрясающий способ увидеть свой объект, проверить prettyPrint.js
Создает таблицу с настраиваемыми параметрами просмотра для печати где-нибудь в вашем документе.Лучше смотреть, чем в console.
var tbl = prettyPrint( myObject, { /* options such as maxDepth, etc. */ });
document.body.appendChild(tbl);
Я программирую в Rhino и я не был удовлетворен ни одним из ответов, которые были размещены здесь.Итак, я написал свой собственный симпатичный принтер:
function pp(object, depth, embedded) {
typeof(depth) == "number" || (depth = 0)
typeof(embedded) == "boolean" || (embedded = false)
var newline = false
var spacer = function(depth) { var spaces = ""; for (var i=0;i<depth;i++) { spaces += " "}; return spaces }
var pretty = ""
if ( typeof(object) == "undefined" ) { pretty += "undefined" }
else if ( typeof(object) == "boolean" ||
typeof(object) == "number" ) { pretty += object.toString() }
else if ( typeof(object) == "string" ) { pretty += "\"" + object + "\"" }
else if ( object == null) { pretty += "null" }
else if ( object instanceof(Array) ) {
if ( object.length > 0 ) {
if (embedded) { newline = true }
var content = ""
for each (var item in object) { content += pp(item, depth+1) + ",\n" + spacer(depth+1) }
content = content.replace(/,\n\s*$/, "").replace(/^\s*/,"")
pretty += "[ " + content + "\n" + spacer(depth) + "]"
} else { pretty += "[]" }
}
else if (typeof(object) == "object") {
if ( Object.keys(object).length > 0 ){
if (embedded) { newline = true }
var content = ""
for (var key in object) {
content += spacer(depth + 1) + key.toString() + ": " + pp(object[key], depth+2, true) + ",\n"
}
content = content.replace(/,\n\s*$/, "").replace(/^\s*/,"")
pretty += "{ " + content + "\n" + spacer(depth) + "}"
} else { pretty += "{}"}
}
else { pretty += object.toString() }
return ((newline ? "\n" + spacer(depth) : "") + pretty)
}
Результат выглядит примерно так:
js> pp({foo:"bar", baz: 1})
{ foo: "bar",
baz: 1
}
js> var taco
js> pp({foo:"bar", baz: [1,"taco",{"blarg": "moo", "mine": "craft"}, null, taco, {}], bleep: {a:null, b:taco, c: []}})
{ foo: "bar",
baz:
[ 1,
"taco",
{ blarg: "moo",
mine: "craft"
},
null,
undefined,
{}
],
bleep:
{ a: null,
b: undefined,
c: []
}
}
Я также опубликовал это в качестве Суть здесь для любых будущих изменений, которые могут потребоваться.
jsDump
jsDump.parse([
window,
document,
{ a : 5, '1' : 'foo' },
/^[ab]+$/g,
new RegExp('x(.*?)z','ig'),
alert,
function fn( x, y, z ){
return x + y;
},
true,
undefined,
null,
new Date(),
document.body,
document.getElementById('links')
])становится
[
[Window],
[Document],
{
"1": "foo",
"a": 5
},
/^[ab]+$/g,
/x(.*?)z/gi,
function alert( a ){
[code]
},
function fn( a, b, c ){
[code]
},
true,
undefined,
null,
"Fri Feb 19 2010 00:49:45 GMT+0300 (MSK)",
<body id="body" class="node"></body>,
<div id="links">
]КУнит (Фреймворк модульного тестирования, используемый jQuery) с использованием слегка исправленной версии jsDump.
JSON.stringify() - не лучший выбор в некоторых случаях.
JSON.stringify({f:function(){}}) // "{}"
JSON.stringify(document.body) // TypeError: Converting circular structure to JSON
Следуя примеру Филхо (большое спасибо :)), я в итоге написал свой собственный, поскольку не смог заставить его делать то, что я хотел.Это довольно грубо и готово, но оно выполняет ту работу, которая мне нужна.Спасибо вам всем за отличные предложения.
Я знаю, это не блестящий код, но как бы там ни было, вот он.Кто-то может счесть это полезным:
// Usage: dump(object)
function dump(object, pad){
var indent = '\t'
if (!pad) pad = ''
var out = ''
if (object.constructor == Array){
out += '[\n'
for (var i=0; i<object.length; i++){
out += pad + indent + dump(object[i], pad + indent) + '\n'
}
out += pad + ']'
}else if (object.constructor == Object){
out += '{\n'
for (var i in object){
out += pad + indent + i + ': ' + dump(object[i], pad + indent) + '\n'
}
out += pad + '}'
}else{
out += object
}
return out
}
На самом деле это всего лишь комментарий к статье Джейсона Бантинга "Используйте JSON.stringify от Crockford", но я не смог добавить комментарий к этому ответу.
Как отмечается в комментариях, в формате JSON.преобразовать в строки не играет хорошо с прототипом библиотеке (www.prototypejs.org).Однако довольно легко заставить их хорошо работать вместе, временно удалив метод Array.prototype.toJSON, который добавляет prototype, запустите stringify() Крокфорда, а затем верните его обратно следующим образом:
var temp = Array.prototype.toJSON;
delete Array.prototype.toJSON;
$('result').value += JSON.stringify(profile_base, null, 2);
Array.prototype.toJSON = temp;
Я думал , Дж .Ответ Бантингса на использование JSON.stringify также был хорошим.Кроме того, вы можете использовать JSON.stringify через JSON-объект YUIS, если вы используете YUI.В моем случае мне нужно было выполнить сброс в HTML, чтобы было проще просто настроить / вырезать / вставить ответ PhiLho.
function dumpObject(obj, indent)
{
var CR = "<br />", SPC = " ", result = "";
if (indent == null) indent = "";
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
{
value = "'" + value + "'";
}
else if (typeof value == 'object')
{
if (value instanceof Array)
{
// Just let JS convert the Array to a string!
value = "[ " + value + " ]";
}
else
{
var od = dumpObject(value, indent + SPC);
value = CR + indent + "{" + CR + od + CR + indent + "}";
}
}
result += indent + "'" + property + "' : " + value + "," + CR;
}
return result;
}
Множество людей пишут код в этой теме, с множеством комментариев о различных подводных камнях.Мне понравилось это решение, потому что оно казалось завершенным и представляло собой единый файл без каких-либо зависимостей.
Он работал "из коробки" и имеет как узловую, так и браузерную версии (предположительно, просто разные оболочки, но я не стал копаться, чтобы подтвердить).
Библиотека также поддерживает pretty printing XML, SQL и CSS, но я не пробовал эти функции.
Простой способ печати элементов в виде строк:
var s = "";
var len = array.length;
var lenMinus1 = len - 1
for (var i = 0; i < len; i++) {
s += array[i];
if(i < lenMinus1) {
s += ", ";
}
}
alert(s);
Мой Аккуратный Джон в библиотеке есть как Ruby, так и Версии JavaScript.Он находится в свободном доступе по (разрешительной) лицензии MIT.Вы можете просмотреть онлайн-демонстрацию / конвертер по адресу:
http://phrogz.net/JS/neatjson/neatjson.html
Некоторые функции (все необязательные):
- Оберните до определенной ширины;если объект или массив может поместиться в строке, он сохраняется в одной строке.
- Выровняйте двоеточия для всех ключей в объекте.
- Отсортируйте ключи к объекту в алфавитном порядке.
- Отформатируйте числа с плавающей запятой до определенного количества десятичных знаков.
- При переносе используйте "короткую" версию, которая помещает открывающие / закрывающие скобки для массивов и объектов в ту же строку, что и первое / последнее значение.
- Управляйте пробелами для массивов и объектов детализированным образом (внутри скобок, перед / после двоеточий и запятых).
- Работает в веб-браузере и как модуль Node.js.
гибкий json включает функцию prettyPrint (), которая может дать вам то, что вы хотите.
