تحويل camelCase إلى kebab-case
حوّل أسماء خصائص JavaScript وأسماء المتغيرات من camelCase إلى kebab-case بحروف صغيرة تفصل بينها شرطات.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
طريقة الاستخدام
- أدخل أسماء بصيغة camelCase (اسم في كل سطر أو داخل نص).
- تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
- انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.
طريقة الحساب
يُقسم كل اسم camelCase إلى كلمات عند كل انتقال من حرف صغير أو رقم إلى حرف كبير، وقبل آخر حرف كبير في اختصار يليه حرف صغير. ثم تُكتب الكلمات بحروف صغيرة وتُربط بشرطة (-). تبقى الرموز والمسافات حول الأسماء كما هي. مثال: backgroundColor تصبح background-color.
مثال
النتيجة: النتيجة بصيغة kebab-case: background-color font-size border-top-left-radius، عدد الأسماء المعالجة: 3.
backgroundColor fontSize borderTopLeftRadius
background-color font-size border-top-left-radius
الحدود والملاحظات
- تتغير كل الكلمات في النص الملصوق، بما فيها الكلمات المحجوزة وأسماء المكتبات، فراجع النتيجة قبل لصقها في الكود.
- لا يمكن تقسيم اسم لا يحتوي على حرف كبير يحدد بداية الكلمة، مثل username أو الأسماء العربية.
أسئلة شائعة عن هذه الأداة
لماذا تُكتب خصائص CSS بصيغة kebab-case؟
لأن CSS تفصل الكلمات بشرطة، أما JavaScript فلا تسمح بالشرطة في أسماء المتغيرات، لذلك تقابل background-color في CSS الاسم backgroundColor في كائن style.
ما علاقة ذلك بسمات data في HTML؟
الخاصية element.dataset.userId في JavaScript تقابل السمة data-user-id في HTML، فحوّل userId هنا ثم أضف البادئة data.
ماذا عن البادئات مثل WebkitTransition؟
تصبح webkit-transition، وعليك إضافة الشرطة الأولى بنفسك لتحصل على خاصية CSS الصحيحة -webkit-transition.