JavaScript 데이터 포맷 / 예쁜 프린터
디버깅을 위해 사람이 읽을 수 있는 형태로 JavaScript 데이터 구조를 "예쁜 인쇄"하는 방법을 찾고 있습니다.
저는 JS에 크고 복잡한 데이터 구조를 저장하고 있는데 이를 조작하기 위해 코드를 작성해야 합니다.제가 무엇을 하고 있는지, 어디가 잘못되고 있는지를 파악하기 위해 필요한 것은 데이터 구조 전체를 볼 수 있고 UI를 통해 데이터를 변경할 때마다 업데이트할 수 있는 것입니다.
JavaScript 데이터 구조를 사람이 읽을 수 있는 문자열에 덤프하는 좋은 방법을 찾는 것 말고는 이 모든 것들을 내가 직접 처리할 수 있다.JSON은 괜찮지만, 포맷을 잘해서 들여써야 해요.보통은 Firebug의 뛰어난 DOM 덤핑 기능을 사용하지만, Firebug에서는 불가능한 구조 전체를 한 번에 볼 수 있어야 합니다.
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 파일만 필요로 합니다. 어떤 라이브러리 등에서도 동작합니다.
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:은 1번: 사용하다od = DumpObject(something)od합니다.다른 목적으로도 렌값(품목수)을 원했기 때문에 곤란했습니다.문자열만 반환하도록 함수에 지시하는 것은 간단한 일입니다.
②: 참참::::::::::::::::.
편집
저는 들여쓰기 버전을 만들었어요.
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$/, "");
}
재귀 호출이 있는 줄에서 들여쓰기를 선택하고, 이 줄 뒤에 주석 처리된 줄을 바꿈으로써 스타일을 가새합니다.
...당신이 당신 자신의 버전을 만든 것을 보았습니다.그것은 좋은 것입니다.방문객들은 선택권을 가질 것이다.
다음을 사용할 수 있습니다.
<pre id="dump"></pre>
<script>
var dump = JSON.stringify(sampleJsonObject, null, 4);
$('#dump').html(dump)
</script>
»Firebug''이면console.debug ("%o", my_object)콘솔에서 해당 아이콘을 클릭하고 대화형 개체 탐색기를 시작할 수 있습니다.전체 개체가 표시되고 중첩된 개체를 확장할 수 있습니다.
Node.js의 경우 다음을 사용합니다.
util.inspect(object, [options]);
멋진 오브젝트 표시 방법을 찾고 계신 분은 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: []
}
}
또한 향후 변경이 필요할 경우를 대비해 Gist로 게시했습니다.
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">
]jsDump의 약간 패치된 버전을 사용하여 QUnit(jQuery에서 사용하는 단위 테스트 프레임워크)을 실행합니다.
경우에 따라서는 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
}
2021년 또는 2021년 이후에 이 질문을 체크하는 모든 사용자용
hassan의 기타 StackOverflow 답변을 확인합니다.
TLDR:
JSON.stringify(data,null,2)
여기서 세 번째 파라미터는 탭/스페이스입니다.
이것은 Jason Bunting의 "Use Crockford's JSON.stringify"에 대한 코멘트일 뿐이지만, 저는 그 대답에 코멘트를 추가할 수 없었습니다.
코멘트에 기재되어 있듯이 JSON.stringify는 시제품(www.prototypejs.org) 라이브러리와 잘 동작하지 않습니다.다만, Array.protype을 일시적으로 삭제하면, 양쪽의 플레이를 용이하게 할 수 있습니다.프로토타입이 추가한 toJSON 메서드를 사용하여 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의 반응도 좋다고 생각했습니다.한편, YUI 를 사용하고 있는 경우는, YUIs JSON 오브젝트를 개입시켜 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;
}
많은 사람들이 이 스레드에 코드를 쓰고 있고, 다양한 갓차들에 대해 많은 코멘트를 하고 있다.저는 이 솔루션이 완벽해 보였고 종속성이 없는 단일 파일이었기 때문에 마음에 들었습니다.
이는 "즉시" 작동하며 노드와 브라우저 버전을 모두 갖추고 있습니다(아마도 다른 포장지일 것입니다만, 확인하려고 파헤친 것은 아닙니다).
라이브러리는 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);
My NeatJSON 라이브러리에는 Ruby 버전과 JavaScript 버전이 모두 있습니다.이 라이선스는 (허용) MIT 라이선스에 따라 자유롭게 이용할 수 있습니다.다음 사이트에서 온라인 데모/컨버터를 볼 수 있습니다.
http://phrogz.net/JS/neatjson/neatjson.html
일부 기능(모두 옵션):
- 특정 너비로 줄 바꿈. 객체 또는 배열이 선에 들어갈 수 있는 경우 한 줄에 유지됩니다.
- 오브젝트 내의 모든 키의 콜론을 정렬합니다.
- 오브젝트 키를 알파벳 순으로 정렬합니다.
- 부동 소수점 숫자의 형식을 특정 소수점 수로 지정합니다.
- 래핑할 때는 어레이 및 객체의 열기/닫기 괄호를 첫 번째/마지막 값과 같은 줄에 배치하는 '짧은' 버전을 사용합니다.
- 배열 및 객체의 공백을 세밀하게 제어합니다(괄호 안, 콜론 및 쉼표 앞뒤).
- 웹 브라우저 및 Node.js 모듈로 동작합니다.
flexjson에는 원하는 것을 얻을 수 있는 prettyPrint() 함수가 포함되어 있습니다.
언급URL : https://stackoverflow.com/questions/130404/javascript-data-formatting-pretty-printer
'programing' 카테고리의 다른 글
| Python 2.5에서 사용할 수 있는 JSON 모듈은 무엇입니까? (0) | 2023.04.05 |
|---|---|
| AngularJs ng-repeat orderBy date가 작동하지 않음 (0) | 2023.04.05 |
| Python에서 AJAX용 최소 서버를 구현하는 방법은 무엇입니까? (0) | 2023.04.05 |
| API 인증 고안 (0) | 2023.04.05 |
| 'react-scripts start' 명령어는 정확히 무엇입니까? (0) | 2023.04.05 |