JavaScript Beautifier およびフォーマッター オンライン
リアルタイムで、乱雑なまたは圧縮された JavaScript (.js / .min.js) を即座にフォーマット、縮小解除、クリーンアップします。当社のトークン対応 JS フォーマッタは、ES6+ アロー関数、テンプレート リテラル、正規表現、for ループ、https:// URL、および連鎖メソッド呼び出し を正確に処理します。また、コンパクトな運用コード用のワンクリック JS Minifier が含まれています。
オンラインでJavaScriptを美しくして縮小する方法
- コードを貼り付けます: 圧縮された
.min.jsバンドルまたはフォーマットされていないスクリプトを左側の Input JavaScript エディターに貼り付けるか、Load Sample をクリックして ES6+ の機能をテストします。 - クイック プリセットを選択するか、オプションをカスタマイズします: 2 スペース (標準)、4 スペース、Allman + Chain Break、または Minify (.min.js)、または中括弧の配置を微調整します (条件付き)右側のパネルでスペースとコメントの削除を行います。
- リアルタイムでレビュー: フォーマットされた出力と文字/行/ブロックのカウンターは、入力または設定の切り替えに応じて自動的に更新されます。
- コピーまたはダウンロード: をクリックしてclipboardにコピーまたは.jsをダウンロードして、
script.beautified.js(またはscript.min.js)を保存します。
JavaScript 書式設定オプションの説明
| オプション | 何を制御するのか | 前に | 後 |
|---|---|---|---|
| 同線ブレース (K&R) | 開始 { をヘッダー行 (オン) またはオールマン スタイルの新しい行 (オフ) に配置します。 |
if(ok){実行();}else{停止();} |
if (ok) { |
| 条件の前のスペース | if、for、while、switch、catch、(. |
for(let i=0;i<5;i++) |
for (i = 0; i < 5; i++) |
| 連鎖メソッドのブレーク | Fluent メソッド チェーン (.filter().map().sort()) をインデントされた行に分割します。 |
items.filter(fn).map(fn).sort(); |
items.filter(fn) |
| コメントを削除 | // および /* */ コメントを削除しますが、https:// 文字列と正規表現はそのままにします。 |
const u = "https://a.com"; // URL |
const u = "https://a.com"; |
トークン対応の JavaScript フォーマッタを使用する理由
/、;、{ などの文字はコンテキストに応じて意味が異なるため、単純なテキスト置換ルールを使用して JavaScript をフォーマットすると、有効なコードが破損することがよくあります。私たちのフォーマッタは、以下を理解する専用の JavaScript 語彙トークナイザー を使用します。
- Strings および ES6 テンプレート リテラル: 一重引用符 (
'...')、二重引用符 ("...")、バックティック テンプレート文字列 (`Hello ${name}`)、およびエスケープされたバックスラッシュ("C:\\Users\\") はそのまま保存されます。 - 正規表現と除算:
/^user_[0-9]+;?/iのような regex リテラルと、(a + b) / 2のような除算式を区別するため、regex 内のセミコロンやスラッシュが行を分割することはありません。 - ZZQ1QXZfor (...) ループ ヘッダー:
for (let i = 0; i < n; i++)内のセミコロンは、3 つの別々の行に分割されるのではなく、同じヘッダー行に残ります。 - 安全なコメント削除: 単行
//と複数行/* */コメントは個別にトークン化されるため、コメントを削除するときに"https://api.example.com"のような URL が切り捨てられることはありません。
よくある質問
.min.js ファイルをオンラインで縮小解除するにはどうすればよいですか?
圧縮された .min.js コードを、左側の Input JavaScript エディターに貼り付けます。トークナイザーは、リアルタイムできれいな複数行インデントを使用してステートメント、ブロック、関数、ループを自動的に展開します。
コメントを削除すると、JavaScript の https:// URL または regex リテラルに影響しますか?
いいえ。フォーマッタは単純な正規表現ではなく字句トークナイザーを使用するため、一重引用符で囲まれた文字列、二重引用符で囲まれた文字列、テンプレート リテラル、および正規表現 (/pattern/g) 内の // および /* */ は削除または変更されません。
K&R (同一ライン) とオールマン (改行) ブレース スタイルの違いは何ですか?
K&R スタイルでは、左中括弧 { を、function、if、またはループ ヘッダー (ほとんどの JavaScript スタイル ガイドの標準) と同じ行に配置します。 同線中括弧のチェックを外すと、オールマン スタイルに切り替わり、開始中括弧が閉じ中括弧と位置合わせされた独自の新しい行に配置されます。
このツールで JavaScript も縮小できますか?
はい。 [Minify JS] ボタンをクリックして (または設定パネルで Minify (Single-Line .min.js) を選択して)、必要なキーワード スペースはそのままにしながら、コメントと不要な空白を削除します。
私の JavaScript コードはどこかのサーバーにアップロードされていますか?
いいえ。すべての JavaScript のフォーマットと縮小化は、ブラウザー内で 100% ローカルに実行されます。ソースコードがデバイスから離れることはありません。