JavaScript Beautifier ve Çevrimiçi Formatlayıcı
Dağınık veya sıkıştırılmış JavaScript'yi (.js / .min.js) gerçek zamanlı olarak anında biçimlendirin, küçültmeyin ve temizleyin. Belirteç duyarlı JS biçimlendiricimiz, ES6+ ok işlevlerini, şablon sabit değerlerini, düzenli ifadeleri, for döngülerini, https:// URL'lerini ve zincirleme yöntem çağrılarını doğru şekilde yönetir ve kompakt üretim kodu için tek tıklamayla JS Minifier içerir.
JavaScript Çevrimiçi Nasıl Güzelleştirilir ve Küçültülür?
- Kodunuzu Yapıştırın: Sıkıştırılmış
.min.jspaketinizi veya biçimlendirilmemiş komut dosyanızı soldaki JavaScript Girişi düzenleyicisine yapıştırın veya ES6+ özelliklerini test etmek için Örnek Yükle seçeneğine tıklayın. - Hızlı bir Ön Ayar Seçin veya Seçenekleri Özelleştirin: Tıklayın 2 Boşluklar (Standart), 4 Boşluklar, Allman + Zincir Kırma veya Minify (.min.js) veya sağdaki panelde ayraç yerleştirme, koşullu aralık ve yorum kaldırma işlemlerinin ince ayarını yapın.
- Gerçek Zamanlı İnceleme: Biçimlendirilmiş çıktı ve karakter/satır/blok sayaçları, siz yazarken veya ayarları değiştirirken otomatik olarak güncellenir.
- Kopyala veya İndir: clipboard'a Kopyala veya
script.beautified.js'yi (veyascript.min.js) kaydetmek için .js dosyasını indirin.
JavaScript Biçimlendirme Seçenekleri Açıklaması
| Seçenek | Neyi Kontrol Ediyor | Önce | Sonrasında |
|---|---|---|---|
| Aynı Hat Destekleri (K&R) | { açılışını başlık satırına (işaretli) veya Allman tarzında yeni bir satıra (işaretsiz) yerleştirir. |
if(tamam){run();}else{stop();} |
if (tamam) { |
| Koşulludan Önceki Boşluk | if, for, while, switch, catch ve (.) arasında bir boşluk görünüp görünmeyeceğini kontrol eder. |
for(let i=0;i<5;i++) |
for (i = 0; i < 5; i++) |
| Zincirli Yöntemleri Kırın | Akıcı yöntem zincirlerini (.filter().map().sort()) girintili çizgiler boyunca böler. |
items.filter(fn).map(fn).sort(); |
items.filter(fn) |
| Yorumları Kaldır | https:// dizelerine ve normal ifadelere dokunulmadan kalırken // ve /* */ yorumlarını çıkarır. |
const u = "https://a.com"; // url |
const u = "https://a.com"; |
Neden Belirteç Duyarlı JavaScript Biçimlendirici Kullanmalı?
JavaScript'yi basit metin değiştirme kurallarıyla biçimlendirmek genellikle geçerli kodu bozar çünkü /, ; ve { gibi karakterler bağlama bağlı olarak farklı anlamlara gelir. Biçimlendiricimiz, aşağıdakileri anlayan özel bir JavaScript sözcük belirteci kullanır:
- Strings ve ES6 Şablon Değişmez Değerleri: Tek tırnak işaretleri (
'...'), çift tırnak ("..."), geri tıklama şablon dizeleri (`Hello ${name}`) ve kaçışlı ters eğik çizgi ("C:\\Users\\") kelimesi kelimesine korunur. - Normal İfadeler ve Bölme:
/^user_[0-9]+;?/igibi regex değişmezlerini(a + b) / 2gibi bölme ifadelerinden ayırır, böylece bir regex içindeki noktalı virgül veya eğik çizgi hiçbir zaman satırı bölmez. for (...)Döngü Başlıkları:for içindeki noktalı virgüller (let i = 0; i < n; i++)üç ayrı satıra bölünmek yerine aynı başlık satırında kalır.- Güvenli Yorum Çıkarma: Tek satırlı
//ve çok satırlı/* */yorumları ayrı olarak simgeleştirilir, bu nedenle"https://api.example.com"gibi URL'ler, yorumlar kaldırılırken hiçbir zaman kesilmez.
Sıkça Sorulan Sorular
Bir .min.js dosyasını çevrimiçi olarak nasıl küçültebilirim?
Sıkıştırılmış .min.js kodunuzu soldaki Input JavaScript düzenleyicisine yapıştırın. Tokenizer, ifadeleri, blokları, işlevleri ve döngüleri temiz, çok satırlı girintilerle gerçek zamanlı olarak otomatik olarak genişletir.
Yorumların kaldırılması JavaScript'imdeki https:// URL'lerini veya regex sabit değerlerini etkiler mi?
Hayır. Formatlayıcımız basit bir düzenli ifade yerine sözcüksel bir belirteç kullandığından, tek tırnaklı dizeler, çift tırnaklı dizeler, şablon değişmezleri ve normal ifadeler (/pattern/g) içindeki // ve /* */ hiçbir zaman çıkarılmaz veya değiştirilmez.
K&R (aynı hat) ve Allman (yeni hat) korse stili arasındaki fark nedir?
K&R stili, açılış küme parantezi {'yi function, if veya döngü başlığıyla (çoğu JavaScript stil kılavuzunda standarttır) aynı satıra yerleştirir. Aynı hat parantezlerinin işaretini kaldırma, Allman stiline geçerek, açılış parantezini, kapanış paranteziyle hizalanmış kendi yeni satırına yerleştirir.
Bu araçla JavaScript'yi de küçültebilir miyim?
Evet. Gerekli anahtar kelime alanlarını olduğu gibi korurken yorumları ve gereksiz boşlukları kaldırmak için Minify JS düğmesini tıklayın (veya ayarlar panelinde Minify (Single-Line .min.js) seçeneğini seçin).
JavaScript kodum herhangi bir sunucuya yüklendi mi?
Hayır. Tüm JavaScript biçimlendirme ve küçültme işlemleri tarayıcınızda %100 yerel olarak yürütülür. Kaynak kodunuz asla cihazınızdan ayrılmaz.