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