Ana içeriğe geç

Metni camelCase, snake_case, kebab-case ve PascalCase'ye Dönüştürme

Converty Team tarafından

Ad temizlemeyi manuel olarak yeniden yazmaya dönüştürmeden metni camelCase, snake_case, kebab-case ve PascalCase'ye nasıl dönüştüreceğinizi öğrenin.

Metni camelCase, snake_case, kebab-case ve PascalCase'ye Dönüştürme

Adlandırma temizliği birçok farklı yerde karşımıza çıkan küçük işlerden biridir. Ürün adının URL slug olması gerekir. Bir e-tablo başlığının bir özellik adı olması gerekir. Bir CSS belirtecinin öngörülebilir bir tanımlayıcıya ihtiyacı vardır. Bir tasarım dosyasındaki notun, geliştiricinin her kelimeyi elle yeniden yazmaya gerek kalmadan koda yapıştırabileceği bir şey olması gerekir.

İşin zor kısmı camelCase, snake_case, kebab-case veya PascalCase'nin ne anlama geldiğini anlamamaktır. İşin zor kısmı, kaynak metinde boşluklar, noktalama işaretleri, büyük harfler ve karışık ayırıcılar olduğunda aynı kuralı tutarlı bir şekilde uygulamaktır. Odaklanmış bir Case / Slug / Escape iş akışının yardımcı olduğu yer burasıdır. Kaynak metni bir kez yapıştırın, vaka çeşitlerini birlikte inceleyin ve bir sonraki sisteme uyan çıktıyı kopyalayın.

Gerçek işte vaka dönüşümü neden önemlidir?

Vaka dönüşümü yazma ve uygulama arasında yer alır. İnsan dostu tabir genellikle makine dostu isim değildir.

"Yeni Ödeme Banner'ı" adında bir özellik bayrağı düşünün. Ürün notunda başlık büyük/küçük harf kullanılır. Kodun newCheckoutBanner'a ihtiyacı olabilir. Bir yapılandırma dosyası new_checkout_banner bekleyebilir. Bir rota segmenti veya CSS sınıfı new-checkout-banner'yi tercih edebilir. Aynı fikir birçok sistemde dolaşıyor ve her manuel yeniden yazma, sapma için küçük bir fırsattır.

İçerik işlemlerinde de aynı sorun ortaya çıkıyor. Başlık slug olur. Bir kampanya adı bir izleme anahtarına dönüşür. Destek etiketi dahili bir tanımlayıcı haline gelir. Her kişi adı farklı şekilde yeniden yazarsa işin aranması, karşılaştırılması ve sürdürülmesi zorlaşır.

Metni yaygın olarak kullanılan büyük/küçük harf formatlarına dönüştürme

En hızlı iş akışı, kaynak ifadesini görünür tutmak ve olası çıktıları yan yana oluşturmaktır.

  1. Case / Slug / Escape aracını açın.
  2. Normalleştirmeniz gereken ifadeyi, etiketi, başlığı veya tanımlayıcıyı yapıştırın.
  3. Oluşturulan camelCase, PascalCase, snake_case ve kebab-case çıktılarını karşılaştırın.
  4. Hedef sistemle eşleşen formu kopyalayın.
  5. Daha sonra birisinin okunabilir adı onaylaması gerekirse, kaynak ifadesini yakınınızda bulundurun.

Kural bir kez uygulandığından bu, ayırıcıları manuel olarak düzenlemekten daha iyidir. Bir kelimenin büyük harfle mi kalması gerektiğini veya noktalama işaretinin ayırıcı mı olması gerektiğini tahmin etmiyorsunuz. Bir cümleyi öngörülebilir çıktılara dönüştürüyorsunuz.

Hangi durumu kullanmalısınız?

Farklı vaka stilleri genellikle farklı hedeflerle eşleşir.

BiçimOrtak kullanımPratik sebep
camelCaseJavaScript değişkenleri, nesne anahtarları, kullanıcı arayüzü durum adlarıÖn uç kodunda kompakt ve yaygın
PascalCaseBileşen adları, sınıf adları, dışa aktarılan türlerAdlandırılmış kod birimlerinin taranmasını kolaylaştırır
snake_caseVeri alanları, CSV'den türetilmiş başlıklar, bazı API'lerKüçük harf kararlılığına sahip net ayırıcılar
kebab-caseURL slugs, rota segmentleri, CSS benzeri etiketlerYollarda ve tireli bağlamlarda okunabilir

Önemli olan tek bir stile evrensel olarak doğru muamelesi yapmamaktır. Doğru çıktı, metnin bir sonraki gideceği yere uyan çıktıdır.

slugs için aynı geçişi kullanın ve kaçış

Vaka temizleme genellikle diğer metin temizleme işlemlerinin yanında görünür. Bir başlığın kebab-case haline gelmesinden sonra temiz bir URL slug haline gelmesi de gerekebilir. Bir snippet tanımlayıcı haline geldikten sonra, ilgili değerin başka bir yere güvenli bir şekilde yapıştırılabilmesi için URL, HTML veya JSON'un çıkış yapması gerekebilir.

Converty'nin büyük/küçük harf, slug ve kaçış çıktılarını bir arada tutmasının nedeni budur. Araç bir içerik yönetim sistemi veya kod düzenleyici olmaya çalışmıyor. Kaba metni yayınlama, yönlendirme ve uygulamanın beklediği şekillere dönüştürmek için kısa bir operasyonel adımdır.

slugs'i İşaretleme ve site simgesi hazırlığıyla birleştiren daha geniş bir lansman iş akışı için İçerik Ekipleri Yeni Bir Lansmana Slugs, İşaretlemeyi ve Favori Simgeleri Nasıl Hazırlayabilir? konusunu okuyun. Bir sonraki soru adlandırma yerine kodlamayla ilgiliyse, URL Kodlama, HTML Kaçış ve JSON Kaçış Ne Zaman Kullanılmalı ile devam edin.

Bir sonraki görev, kabaca bir ifadeyi tahmin edilebilir bir tanımlayıcıya, slug veya çıkış karakterli dizeye dönüştürmek olduğunda, Case / Slug / Escape aracını açın.

Bunlar da ilginizi çekebilir