مقدمة إلى قالب الحروف.

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

ما هي القيم الحرفية للنموذج؟

تسمح لنا النماذج الحرفية بالتعامل مع السلاسل بشكل أسهل. وهي محاطة بعلامات التحديد الخلفية (`) بدلاً من (') أو (')، وهي تدعم استيفاء السلسلة باستخدام بناء الجملة (${}) لوضع المتغيرات أو استدعاءات الوظائف مباشرة في سلسلة.

إليك مثال على كيفية تبسيط القيم الحرفية للقالب لاستكمال السلسلة.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

فوائد استخدام القالب الحرفي

1. تحسين إمكانية القراءة

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

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. سلاسل متعددة الأسطر

قبل القيم الحرفية للقالب، كان عليك استخدام أحرف الهروب مثل \n لإنشاء سلاسل متعددة الأسطر. الآن يمكنك كتابتها داخل العلامات الخلفية(`).

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. تقييم التعبير

يمكنك أيضًا إجراء العمليات الحسابية أو استدعاء الوظائف أو معالجة البيانات داخل السلاسل.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

حالات الاستخدام الشائعة في جافا سكريبت

1. إنشاء HTML

بدلاً من إنشاء سلاسل HTML مع التسلسل، يمكنك وضع المتغيرات مباشرة في السلسلة مع الاستيفاء.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. تسجيل الرسائل

يمكنك أيضًا إدراج المتغيرات مباشرة في رسائل السجل دون الحاجة إلى التسلسل.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. إنشاء عناوين URL

تسهل القيم الحرفية للنموذج إنشاء عناوين URL أيضًا.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. المنطق الشرطي

حالة استخدام رائعة أخرى هي المنطق الشرطي. باستخدام القيم الحرفية للقالب، يمكنك إعطاء السلاسل شروطًا بسيطة باستخدام العامل الثلاثي (؟ :)، وهو اختصار لشرط if-else.
العوامل المنطقية مثل && (و) أو || (أو) يمكن استخدامها أيضًا لإضافة أجزاء شرطية إلى سلسلة. وهذا يلغي الحاجة إلى عبارات if-else الإضافية أو الحاجة إلى التسلسل.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

يمكنك أيضًا إضافة تعبيرات أكثر تعقيدًا داخل القيم الحرفية للقالب.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

خاتمة

توفر القيم الحرفية للنماذج في JavaScript طريقة أنظف وأكثر كفاءة للتعامل مع استيفاء السلسلة. بين إنشاء محتوى الويب، أو تسجيل الرسائل، أو إنشاء تعليمات برمجية أكثر قابلية للقراءة، توفر هذه الطريقة المرونة التي تحتاجها.

في المرة القادمة التي تتعامل فيها مع المتغيرات والسلاسل، حاول استخدام القيم الحرفية للقالب. ستدرك سريعًا سبب كونها طريقتي المفضلة للعمل مع JavaScript.

موارد

1. مستندات ويب MDN - حرفية النموذج
2. GitHub - مختبر مراجعة السلاسل للمرحلة الأولى
3. مدارس W3 - سلاسل قالب جافا سكريبت