JavaScript 데이터 형식화/예쁜 프린터
https://stackoverflow.com/questions/130404
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 방법을 찾으려고 노력 중이야 pretty print 디버깅을 위해 사람이 읽을 수 있는 형식의 JavaScript 데이터 구조입니다.
JS에 저장되는 다소 크고 복잡한 데이터 구조가 있으며 이를 조작하려면 일부 코드를 작성해야 합니다.내가 하고 있는 일이 어디인지, 어디가 잘못되었는지 파악하기 위해 정말로 필요한 것은 데이터 구조를 전체적으로 볼 수 있고, UI를 통해 변경할 때마다 업데이트할 수 있는 것입니다.
JavaScript 데이터 구조를 사람이 읽을 수 있는 문자열로 덤프하는 좋은 방법을 찾는 것 외에 이 모든 작업은 제가 직접 처리할 수 있습니다.JSON이면 가능하지만 형식이 적절하고 들여쓰기가 잘 되어 있어야 합니다.나는 일반적으로 이를 위해 Firebug의 뛰어난 DOM 덤핑 기능을 사용하지만 전체 구조를 한 번에 볼 수 있어야 하는데 Firebug에서는 불가능한 것 같습니다.
어떤 제안이라도 환영합니다.
미리 감사드립니다.
해결책
출력이 들여 쓰기되지는 않지만 JS 객체를 읽을 수있는 형태로 덤프하는 기능을 작성했지만 추가하기에는 너무 어렵지 않아야합니다. )이 압입 문제를 처리했습니다.
다음은 "간단한"버전입니다.
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$/, "");
}
재귀적인 호출과 함께 라인에서 들여 쓰기를 선택 하고이 줄 뒤에 주석은 선을 전환하여 스타일을 기울입니다.
... 나는 당신이 당신의 자신의 버전을 채찍질하는 것을 봅니다. 방문객들은 선택할 것입니다.
다른 팁
사용 Crockford의 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: []
}
}
나는 또한 그것을 a로 게시했습니다 여기서 요점 향후 변경이 필요한 경우.
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')
])becomes
[
[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">
]Qunit (jQuery에서 사용하는 단위 테스트 프레임 워크) 약간 패치 된 jsdump 버전을 사용합니다.
json.stringify ()는 경우에 따라 최선의 선택이 아닙니다.
JSON.stringify({f:function(){}}) // "{}"
JSON.stringify(document.body) // TypeError: Converting circular structure to JSON
Philho의 리드를 받아 들였습니다 (매우 감사합니다 :)), 나는 내가 원하는 것을 할 수 없었기 때문에 내 자신의 글을 썼습니다. 꽤 거칠고 준비되었지만 필요한 일을합니다. 훌륭한 제안에 감사드립니다.
그것은 훌륭한 코드가 아니지만, 그 가치가있는 것에 대해 여기에 있습니다. 누군가 유용하다고 생각할 수 있습니다.
// 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
}
이것은 실제로 Jason Bunting의 "Crockford 's Json.stringify 사용"에 대한 의견 일뿐입니다. 그러나 해당 답변에 의견을 추가 할 수 없었습니다.
의견에 언급 된 바와 같이, JSON.stringify는 프로토 타입 (www.prototypejs.org) 라이브러리에서 잘 작동하지 않습니다. 그러나 배열을 일시적으로 제거하여 프로토 타입을 추가하고 Crockford의 Stringify ()를 실행 한 다음 다음과 같이 다시 넣음으로써 잘 재생하는 것은 매우 쉽습니다.
var temp = Array.prototype.toJSON;
delete Array.prototype.toJSON;
$('result').value += JSON.stringify(profile_base, null, 2);
Array.prototype.toJSON = temp;
JSON.stringify 사용에 대한 J. Buntings 응답도 좋다고 생각했습니다. a a a -a a a a a a yui를 사용하는 경우 json.stringify를 통해 json.stringify를 사용할 수 있습니다. 제 경우에는 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;
}
요소를 문자열로 인쇄하기위한 간단한 것 :
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);
나의 깔끔한JSON 라이브러리에는 Ruby와 자바스크립트 버전.(허용적인) MIT 라이선스에 따라 무료로 사용할 수 있습니다.다음 사이트에서 온라인 데모/변환기를 볼 수 있습니다.
http://phrogz.net/JS/neatjson/neatjson.html
일부 기능(모두 선택 사항):
- 특정 너비로 감싸십시오.객체나 배열이 한 줄에 들어갈 수 있으면 한 줄에 유지됩니다.
- 객체의 모든 키에 대해 콜론을 정렬합니다.
- 객체에 대한 키를 알파벳순으로 정렬합니다.
- 부동 소수점 숫자를 특정 소수 자릿수로 포맷합니다.
- 래핑할 때 배열과 개체의 여는/닫는 괄호를 첫 번째/마지막 값과 같은 줄에 배치하는 '짧은' 버전을 사용하세요.
- 배열과 객체의 공백을 세분화된 방식으로 제어합니다(괄호 안, 콜론 및 쉼표 앞/뒤).
- 웹 브라우저에서 Node.js 모듈로 작동합니다.
Flexjson 원하는 것을 줄 수있는 PrettyPrint () 함수가 포함되어 있습니다.
