محول وحدات القياس للكباب — أداة مجانية عبر الإنترنت
ما هو محول وحدات القياس للكباب?
"Kebab Case" (kebab-case) هي قاعدة تسمية تربط الكلمات بشرطات وتحوّل جميع الأحرف إلى أحرف صغيرة. وتبدو النتيجة كما يلي: this-is-kebab-case — حيث يتم ربط الكلمات بشرطات، على غرار المكونات المعلقة على سيخ الكباب.
وهي تنسيق التسمية القياسي لأسماء فئات CSS، وعناوين URL المختصرة، ومعرفات HTML وسمات البيانات، وأسماء الملفات في العديد من أطر عمل الويب. تقوم هذه الأداة بتحويل أي مدخلات — نص عادي، أو camelCase، أو snake_case، أو PascalCase — إلى مخرجات kebab-case نظيفة وآمنة لعناوين URL يمكنك استخدامها على الفور.
متى تستخدم محول وحدات القياس للكباب?
استخدم أسلوب "kebab-case" في أسماء فئات CSS ومحددات نمط BEM، وعناوين URL المختصرة لمقالات المدونة وصفحات المنتجات، وسمات بيانات HTML، ومفاتيح التكوين في ملفات YAML. يستخدم مطورو الواجهة الأمامية الذين يتنقلون بين أسماء الخصائص المكتوبة بأسلوب "camelCase" في JavaScript ونظيراتها المكتوبة بأسلوب "kebab-case" في CSS (مثل: backgroundColor → background-color) هذه الأداة بانتظام. سيجدها محترفو تحسين محركات البحث (SEO) الذين يقومون بإنشاء عناوين URL مختصرة مفيدة — حيث تعامل محركات البحث الواصلات كفواصل بين الكلمات، مما يجعل kebab-case صديقًا لمحركات البحث بشكل طبيعي.
لإنشاء عناوين URL مختصرة مع تنقية إضافية، جرب URL Slug Generator. لتسمية Python أو قواعد البيانات، استخدم Snake Case Converter.
كيفية استخدام هذه الأداة
- 1Enter your text or phrase
- 2Click 'Convert' to get kebab-case
- 3Copy your URL-friendly slug
تقوم الأداة بإزالة الأحرف الخاصة، وتحويل جميع الأحرف إلى أحرف صغيرة، واستبدال المسافات وخطوط التسطير والنقاط وعلامات فواصل "camelCase" بواصلة. والنتيجة دائمًا ما تكون سلسلة نظيفة، مكتوبة بأحرف صغيرة، ومفصولة بواصلة.
أمثلة
| Input | Output |
|---|---|
| Hello World | hello-world |
| backgroundColor | background-color |
| my_variable_name | my-variable-name |
| The Quick Brown Fox | the-quick-brown-fox |
| user_id_column | user-id-column |
القواعد والسلوك
- يتم تحويل جميع الكلمات إلى أحرف صغيرة. وبغض النظر عن تنسيق النص المدخل — أحرف كبيرة، أو أحرف كبيرة في بداية الكلمات، أو أحرف كبيرة في بداية الكلمات مع فواصل — فإن كل حرف في النص الناتج سيكون حرفًا صغيرًا.
- يتم فصل الكلمات بواسطة واصلات (-). ويتم استبدال المسافات وخطوط التسطير والنقاط وانتقالات الأحرف في نمط camelCase بواصلة واحدة للحصول على نمط kebab-case واضح.
- يتم حذف الأحرف الخاصة وعلامات الترقيم. ولا يتبقى سوى الأحرف (a–z) والأرقام (0–9) والواصلة، مما يجعل النص الناتج آمنًا للاستخدام في عناوين URL ومحددات CSS وسمات HTML.
أدوات ذات صلة
الأسئلة الشائعة
ما هو "كباب-كيس"؟
تُعرف "kebab-case" بأنها قاعدة تسمية تُكتب فيها الكلمات بأحرف صغيرة وتُفصل بينها واصلات، مثل my-component-name. وهي تشبه المكونات المُعلقة على سيخ الكباب. وتُعد هذه القاعدة هي المعيار المتبع في أسماء فئات CSS وسمات HTML ومسارات عناوين URL وأسماء الملفات في العديد من أطر عمل الويب، بما في ذلك Angular وEmber.
متى يتم استخدام مصطلح «كباب-كيس»؟
تستخدم أسماء فئات CSS (.nav-bar، .btn-primary)، وسمات معرّفات HTML، وعناوين URL المختصرة (/blog/my-post-title)، ومعرّفات Lisp وClojure، ومحددات مكونات Angular، ومفاتيح التكوين في YAML، جميعها أسلوب كتابة kebab-case. كما أنه الأسلوب الافتراضي لأسماء حزم npm والعديد من أسماء أوامر واجهة سطر الأوامر (CLI).
هل حالة الكباب هي نفسها حالة العمود الفقري أو حالة اللثغة؟
نعم، إنها متطابقة — كل الكلمات مكتوبة بأحرف صغيرة ومفصولة بشرطات. يختلف الاسم باختلاف المجموعة: يطلق عليه مطورو الويب اسم «kebab-case»، ويطلق عليه مبرمجو لغة Lisp اسم «lisp-case»، بينما يطلق عليه البعض اسم «spinal-case». وتنتج أداتنا نفس النتيجة بغض النظر عن الاسم الذي تطلقه عليها.
لماذا يُعد أسلوب "kebab-case" مناسبًا لعناوين URL؟
تتعامل محركات البحث مثل Google مع الواصلات على أنها فواصل بين الكلمات، لذا يتم فهرسة عناوين URL المكتوبة بنمط "kebab-case" (مثل /best-free-tools) بشكل صحيح ككلمات رئيسية منفصلة. أما علامات التسطير في عناوين URL المكتوبة بنمط snake_case فتُعامل على أنها ربط بين الكلمات، مما يجعل الواصلات الخيار الأفضل لعناوين URL الملائمة لتحسين محركات البحث.
هل يمكنني تحويل أسلوب PascalCase إلى أسلوب kebab-case؟
نعم. تكتشف الأداة انتقالات الأحرف الكبيرة في المدخلات المكتوبة بنمط PascalCase وcamelCase وتقوم بإدراج واصلات عند كل فاصل. على سبيل المثال، يتحول 'MyComponentName' إلى 'my-component-name'، ويتحول 'backgroundColor' إلى 'background-color'.