အခမဲ့ JSON ဖော်မတ်တာ
ဖော်မတ်၊ တရားဝင်အောင်၊ လျှော့ချရန်နှင့် JSON ဒေတာကို ရှာဖွေပါ။ သစ်ပင်မြင်ကွင်း၊ အထားအသိုအသားပေးဖော်ပြခြင်းနှင့် ကလစ်တစ်ချက်နှိပ်မိတ္တူ။
အသုံးများသော အသုံးပြုမှုများ
- API အမြန်ဆိုင်ရာများ ဖွဲ့စည်းပါအကျိုးအဆိုင်းဆိုင် API JSON အမြန်ဆိုင်ရာများကို ကူးယူ ပြီး ချက်ချင်း လေးခြင်း၊ indented ထုတ်ယူရန်သို့ ဖွဲ့စည်းပါ။
- JSON ဖွဲ့စည်းအုပ်စုံ ဖွဲ့စည်းပါJSON ဖွဲ့စည်းအုပ်စုံ ရှင်းလင်းပြီး အတည်ပြုပါ — package.json၊ tsconfig.json၊ အဆင့်အတန်းများ၊ နှင့် အခြား။
- အမှားရှာရန် JSON ကို ပုံစံချပါကျုံးရည်မြန်မြည်း ခွင်းခွင်း JSON မှတ်တမ်းများ၊ ခွင်းခွင်းမှုများ၊ အခြင်းအတွင်းထုတ်ယူရန် ချက်ချင်း။
- JSON ပြန်လည်စာထည့်သွင်းခြင်း ဖိုင်များ ဖွဲ့စည်းပါReact၊ Vue၊ နှင့် Next.js applications တွင် အသုံးပြုထားသည့် i18n ပြန်လည်စာထည့်သွင်းခြင်း JSON ဖိုင်များ (en.json၊ de.json) အတည်ပြုခြင်း နှင့် အလှတင်ခြင်းပါ။
- Webhook Payloads များ စုံစမ်း ဖွဲ့စည်းပါStripe၊ GitHub၊ သို့မဟုတ် Shopify မှ မူလ webhook payloads များ ကူးယူ ပြီး သူတို့ကို ရှင်းလင်းစွာ ဖွဲ့စည်းထားသည့် တည့်အံကျ ရှိုးပါ။
မည်သို့ အလုပ်လုပ်သည်
Formatter သည် JavaScript ၏ built-in JSON.parse နှင့် JSON.stringify ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည် — library၊ server မပါဝင်ပါ။ Parsing၊ ဖော်မတ်ချခြင်း၊ minify လုပ်ခြင်းနှင့် interactive tree view အားလုံးကို သင်ရိုက်နေစဉ် local တွင် ဖြစ်ပျက်ပါသည်။
- 1Input ပေါ် Live parseJSON.parse ကို သင့်နောက်ဆုံး keystroke ပြီးနောက် 200 ms တွင် run လုပ်သည်။ Parsing မအောင်မြင်ပါက ကိုယ်တိုင်ရေးထားသော error-location function တစ်ခုသည် V8 သို့မဟုတ် Firefox မှ SyntaxError message ကို ဖတ်ပြီး line နှင့် column နံပါတ်ကို ထုတ်ယူကာ textarea တွင် error သို့ jump link တစ်ခု ပေးသည်။
- 2Unsafe integer ရှာဖွေရေးရှာဖွေမှုOutput မပြသမီ ကိရိယာသည် raw source ကို digit 16 လုံးနှင့်အထက် ရှိသော integer literal များအတွက် scan လုပ်သည် (quoted string များအတွင်းရှိ ကို လျစ်လျူရှုသည်)၊ ထို့နောက် တစ်ခုစီကို Number.isSafeInteger ဖြင့် စမ်းသပ်သည်။ IEEE-754 double storage က မည်သည့်တစ်ခုကိုမဆို တိတ်တဆိတ် ဝိုင်းသွားလျှင် copy သို့မဟုတ် download မလုပ်မီ သတိပေးချက် ပေါ်လာသည်။
- 3ဖော်မတ်ချခြင်း၊ minify လုပ်ခြင်းနှင့် key sortingJSON.stringify(value, null, indent) သည် ဖော်မတ်ချထားသော (သို့) minify ထားသော output ကို ထုတ်ပေးသည်။ Sort keys ဖွင့်ထားလျှင် recursive function တစ်ခုသည် parse လုပ်ထားသော tree ရှိ object တိုင်းကို လျှောက်ပြီး serialization မလုပ်မီ Object.keys(...).sort() ဖြင့် ပြန်တည်ဆောက်သည် — array များကို ၎င်းတို့၏ မူရင်း အစီအစဉ်တွင်ပင် ထားသည်။
- 4အပြန်အလှန်တုံ့ပြန်နိုင်သော သစ်ပင်မြင်ကွင်းTree view သည် parse လုပ်ထားသော object ကို depth၊ path နှင့် expand/collapse state ပါသော node ပြားပြား list တစ်ခုသို့ ပြောင်းလဲပေးသော ကိုယ်တိုင်ရေးထားသော recursive flatten တစ်ခုဖြစ်သည်။ Rendering ကို visible node 5,000 ခုတွင် ကန့်သတ်ထားသဖြင့် ကြီးမားသော expand လုပ်ထားသော array ပါသော megabyte များစွာရှိ document များတွင် tab ကို ရပ်တန့်ခြင်းမှ ကာကွယ်ထားသည်။
အားလုံးကို သင့် browser ထဲတွင် local တွင် လုပ်ဆောင်ပါသည် — သင့် JSON ကို server မည်သည့်တစ်ခုသို့မဆို ဘယ်တော့မှ မပို့ပါ။
ဆက်နွှယ်သော ကိရိယာများ
CSS ချုံ့/လှပဆင်စက်
ဖိုင်အရွယ်အစား လျှော့ချရန် CSS minify ပြုလုပ်ပါ သို့မဟုတ် ဖတ်နိုင်ရေးအတွက် minified CSS ကို beautify ပြုလုပ်ပါ။ ချက်ချင်း၊ browser တွင်。
CSS လှပဆင်စက်
ချုံ့ထားသော CSS ကို တသမတ်တည်း အင်ဒင့်တင်ဖြင့် ဖတ်ရှုလွယ်အောင်ပြုပါ၊ သို့မဟုတ် ချုံ့ပါ။ ခန့်မှန်းနိုင်သော ကွာခြားချက်များအတွက် ရွေးချယ်စရာအဖြစ် property များကို အက္ခရာစဉ်စီနိုင်သည်။
HTML လှပဆင်/ချုံ့စက်
မှန်ကန်သော nesting indentation ဖြင့် HTML ကို pretty-print သို့မဟုတ် minify ပြုလုပ်ပါ။ <pre>, <script>, <style> block အတွင်း အကြောင်းအရာ ထိန်းသိမ်းသည်。