هل احتجت يومًا لتحويل سلسلة إلى حالة الجمل؟ لقد وجدت مقتطفًا برمجيًا مثيرًا للاهتمام أثناء استكشاف مستودع Supabase مفتوح المصدر. وإليكم الطريقة التي يستخدمونها:

function featureToCamelCase(feature: Feature) {
  return feature
    .replace(/:/g, '\_')
    .split('\_')
    .map((word, index) => (index === 0 ? word : word\[0\].toUpperCase()   word.slice(1)))
    .join('') as FeatureToCamelCase
}

هذه الوظيفة أنيقة جدًا. فهو يستبدل النقطتين بشرطات سفلية، ويقسم السلسلة إلى كلمات، ثم يرسم خريطة لكل كلمة لتحويلها إلى حالة الجمل. يتم الاحتفاظ بالكلمة الأولى بأحرف صغيرة، ويتم كتابة الحرف الأول من الكلمات اللاحقة بأحرف كبيرة قبل ضمها معًا مرة أخرى. بسيطة لكنها فعالة!

لقد صادفت طريقة أخرى في Stack Overflow لا تستخدم التعبيرات العادية. إليك البديل:

function toCamelCase(str) {
  return str.split(' ').map(function(word, index) {
    // If it is the first word make sure to lowercase all the chars.
    if (index == 0) {
      return word.toLowerCase();
    }
    // If it is not the first word only upper case the first char and lowercase the rest.
    return word.charAt(0).toUpperCase()   word.slice(1).toLowerCase();
  }).join('');
}

يحتوي مقتطف الكود هذا من SO على تعليقات تشرح ما يفعله هذا الكود باستثناء أنه لا يستخدم أي نوع من التعبير العادي. الكود الموجود في طريقة Supabase لتحويل سلسلة إلى CamelCase يشبه إلى حد كبير إجابة SO هذه، باستثناء التعليقات والتعبير العادي المستخدم.

.replace(/:/g, '\_')

تقوم هذه الطريقة بتقسيم السلسلة بمسافات ثم تعيينها على كل كلمة. الكلمة الأولى مكتوبة بأحرف صغيرة بالكامل، في حين تتم كتابة الكلمات اللاحقة بأحرف كبيرة عند الحرف الأول ويتم وضعها بأحرف صغيرة في بقية الكلمات. وأخيرًا، يتم ضم الكلمات معًا مرة أخرى لتكوين سلسلة حالة الجمل.

ذكر أحد التعليقات المثيرة للاهتمام من أحد مستخدمي Stack Overflow ميزة الأداء لهذا الأسلوب:

" 1 لعدم استخدام التعابير العادية ولو كان السؤال عن حل باستخدامها. يعد هذا حلاً أكثر وضوحًا، وهو أيضًا فوز واضح للأداء (لأن معالجة التعبيرات العادية المعقدة مهمة أصعب بكثير من مجرد التكرار على مجموعة من السلاسل وربط أجزاء منها معًا). راجع jsperf.com/camel-casing-regexp-or-character-manipulation/1 حيث أخذت بعض الأمثلة هنا مع هذا (وأيضًا نموذجي المتواضع تحسينه من أجل الأداء، على الرغم من أنني ربما أفضل هذا الإصدار من أجل الوضوح في معظم الحالات).

كلا الطريقتين لهما مزاياهما. يعد أسلوب regex في كود Supabase موجزًا ​​ويستفيد من تقنيات معالجة السلسلة القوية. من ناحية أخرى، تم الإشادة بالنهج غير العادي لوضوحه وأدائه، لأنه يتجنب العبء الحسابي المرتبط بالتعبيرات العادية.

إليك كيفية الاختيار بينهما:

استخدم أسلوب التعبير العادي
• إذا كنت بحاجة إلى حل مدمج أحادي الخط يستفيد من إمكانات التعبير العادي القوية في JavaScript. تأكد أيضًا من إضافة تعليقات تشرح ما يفعله التعبير العادي الخاص بك، حتى تتمكن من فهمه بنفسك أو المطور التالي الذي يعمل مع الكود الخاص بك.
اختر الطريقة التي لا تعتمد على التعبير العادي
• إذا كنت تعطي الأولوية لقابلية القراءة والأداء، خاصة عند التعامل مع سلاسل أطول أو تشغيل هذا التحويل عدة مرات.

هل تريد معرفة كيفية إنشاء shadcn-ui/ui من الصفر؟ راجع

الإنشاء من الصفر

ْعَنِّي:

الموقع الإلكتروني: https://ramunarasinga.com/

لينكد إن: https://www.linkedin.com/in/ramu-narasinga-189361128/

جيثب: https://github.com/Ramu-Narasinga

البريد الإلكتروني: [email protected]

إنشاء shadcn-ui/ui من الصفر

مراجع:

1. https://stackoverflow.com/a/35976812