شرح toLowerCase() و toUpperCase() في JavaScript: تحويل النص إلى أحرف صغيرة وكبيرة باحتراف

مقدمة إلى تحويل حالة الأحرف في JavaScript

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

في هذا الدليل، ستتعرف على كيفية استخدام الدالتين toLowerCase() وtoUpperCase()، بالإضافة إلى طريقة تحويل أول حرف فقط إلى حرف كبير، وكذلك جعل أول حرف من كل كلمة في الجملة كبيراً.

كيفية استخدام الدالة toLowerCase() في JavaScript

تُستخدم الدالة toLowerCase() لتحويل جميع الأحرف داخل النص إلى أحرف صغيرة lowercase.

الصيغة العامة

String.toLowerCase()

هذه الدالة لا تستقبل أي معاملات parameters.

من المهم أيضاً معرفة أن Strings in JavaScript are immutable، أي أن النص الأصلي لا يتغير مباشرة. بدلاً من ذلك، تُرجع الدالة نصاً جديداً بعد التحويل، بينما يبقى النص الأصلي كما هو.

مثال عملي

let myGreeting = 'Hey there!';
console.log(myGreeting.toLowerCase());
// output
// hey there!

في المثال السابق، تم تحويل الحرف الكبير H إلى حرف صغير، بينما بقيت الأحرف الصغيرة الأخرى دون تغيير.

مثال على نص مكتوب بالكامل بأحرف كبيرة

const anotherGreeting = 'GOOD MORNING!!';
console.log(anotherGreeting.toLowerCase());
// output
// good morning!!

عند تطبيق toLowerCase() على نص يحتوي على أحرف كبيرة فقط، سيتم تحويلها كلها إلى أحرف صغيرة مع الحفاظ على الرموز وعلامات الترقيم كما هي.

كيفية استخدام الدالة toUpperCase() في JavaScript

تعمل الدالة toUpperCase() بطريقة مشابهة، لكن بدلاً من التحويل إلى أحرف صغيرة، فإنها تحول النص إلى أحرف كبيرة uppercase.

الصيغة العامة

String.toUpperCase()

وكما هو الحال مع toLowerCase()، فإن هذه الدالة لا تستقبل أي معاملات، كما أنها لا تعدّل النص الأصلي، بل تعيد قيمة جديدة بعد التحويل.

مثال عملي

console.log('I am shouting!'.toUpperCase());
// output
// I AM SHOUTING!

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

كيفية تكبير أول حرف فقط في النص داخل JavaScript

في بعض الحالات، لا تحتاج إلى تحويل النص بالكامل إلى uppercase، بل تريد فقط جعل الحرف الأول كبيراً، مثل تنسيق اسم أو عنوان قصير.

لنفترض أن لدينا النص التالي:

let myGreeting = 'hello';

الخطوة الأولى: الوصول إلى أول حرف وتحويله إلى uppercase

يمكنك الوصول إلى أول حرف باستخدام الفهرس 0، لأن العد في JavaScript يبدأ من الصفر.

let capFirstLetter = myGreeting[0].toUpperCase();
console.log(capFirstLetter);
// returns the letter 'H'

الخطوة الثانية: استخراج بقية النص

بعد ذلك، نحتاج إلى الاحتفاظ ببقية الكلمة بدون أول حرف. يمكن تنفيذ ذلك باستخدام الدالة slice().

let restOfGreeting = myGreeting.slice(1);
console.log(restOfGreeting);
// returns the string 'ello'

الخطوة الثالثة: دمج الجزأين

let newGreeting = capFirstLetter + restOfGreeting;
console.log(newGreeting);
// Hello

بهذه الطريقة، نحصل على نص جديد يبدأ بحرف كبير، بينما تبقى بقية الأحرف كما هي.

تنفيذ العملية داخل دالة قابلة لإعادة الاستخدام

بدلاً من تكرار الخطوات السابقة كل مرة، من الأفضل وضعها داخل دالة:

function capFirst(str) {
  return str[0].toUpperCase() + str.slice(1);
}

console.log(capFirst('hello'));
// output
// Hello

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

كيفية تكبير أول حرف من كل كلمة في الجملة

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

لنفترض أن لدينا الجملة التالية:

let learnCoding = 'learn to code for free with freeCodeCamp';

الخطوة الأولى: تقسيم الجملة إلى كلمات باستخدام split()

نستخدم split(" ") لتقسيم النص عند كل مسافة، وبذلك نحصل على مصفوفة من الكلمات.

let splitLearnCoding = learnCoding.split(" ");
console.log(splitLearnCoding);
// ['learn', 'to', 'code', 'for', 'free', 'with', 'freeCodeCamp']

الخطوة الثانية: المرور على كل كلمة باستخدام map()

بعد تحويل الجملة إلى مصفوفة، يمكن معالجة كل كلمة على حدة عبر map().

let capSplitLearnCoding = splitLearnCoding.map(word => {
  return word[0].toUpperCase() + word.slice(1);
})

console.log(capSplitLearnCoding);
// ['Learn', 'To', 'Code', 'For', 'Free', 'With', 'FreeCodeCamp']

الخطوة الثالثة: إعادة تجميع الكلمات في جملة واحدة باستخدام join()

let learnCodingNew = capSplitLearnCoding.join(" ");
console.log(learnCodingNew);
// Learn To Code For Free With FreeCodeCamp

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

تنفيذ العملية داخل دالة واحدة

يمكن أيضاً جمع كل الخطوات السابقة داخل دالة واحدة مرنة:

function capFirstLetterInSentence(sentence) {
  let words = sentence.split(" ").map(word => {
    return word[0].toUpperCase() + word.slice(1);
  })

  return words.join(" ");
}

console.log(capFirstLetterInSentence("i am learning how to code"));
// I Am Learning How To Code

متى تستخدم toLowerCase() وtoUpperCase()؟

هذه الدوال ليست مفيدة فقط لتنسيق النصوص، بل تدخل في كثير من الاستخدامات العملية، مثل:

• توحيد النصوص قبل المقارنة بين القيم.
• تنسيق أسماء المستخدمين أو العناوين.
• تحسين تجربة المستخدم في النماذج وواجهات الإدخال.
• معالجة البيانات النصية القادمة من API أو قواعد البيانات.
• إنشاء عناوين أو Labels ذات مظهر موحد داخل التطبيق.

نصائح مهمة عند التعامل مع النصوص في JavaScript

الخلاصة التقنية

توفر JavaScript أدوات بسيطة لكنها فعالة جداً للتعامل مع حالة الأحرف في النصوص. باستخدام toLowerCase() وtoUpperCase() يمكنك تنفيذ عمليات تنسيق أساسية بسرعة، بينما يتيح لك الدمج بين slice() وsplit() وmap() بناء حلول أكثر مرونة لتكبير أول حرف من كلمة أو جملة كاملة. من الناحية العملية، يُفضَّل دائماً تحويل هذه العمليات المتكررة إلى دوال قابلة لإعادة الاستخدام، لأن ذلك يجعل الكود أنظف وأسهل في الصيانة والتطوير.