دليل إلى JavaScript Template Literals

تم طرح Template Literals في ES2015 ، المعروف أيضًا باسم ES6 ، ويقدم طريقة جديدة للإعلان عن السلاسل ، ولكن أيضًا بعض التركيبات الجديدة المثيرة للاهتمام والتي تحظى بشعبية كبيرة بالفعل.

مقدمة للقوالب الحرفية

Template Literals هي ميزة ES2015 / ES6 جديدة تتيح لك العمل مع السلاسل بطريقة جديدة مقارنةً بـ ES5 وما دونه.

الصيغة للوهلة الأولى بسيطة للغاية ، ما عليك سوى استخدام backticks بدلاً من علامات الاقتباس المفردة أو المزدوجة:

const a_string = `something`

إنها فريدة لأنها توفر الكثير من الميزات التي لا توفرها السلاسل العادية المبنية بعلامات اقتباس ، على وجه الخصوص:

  • أنها توفر تركيبًا رائعًا لتحديد السلاسل متعددة الأسطر
  • أنها توفر طريقة سهلة لاستيفاء المتغيرات والتعبيرات في السلاسل
  • أنها تسمح لك بإنشاء DSL مع علامات القوالب (DSL تعني لغة مجال معينة ، وتستخدم على سبيل المثال في React بواسطة Styled Components ، لتعريف CSS لأحد المكونات)

دعونا نتعمق في كل من هذه بالتفصيل.

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

قبل ES6 ، لإنشاء سلسلة تمتد على سطرين ، كان عليك استخدام ملف\حرف في نهاية السطر:

const string =
  'first part \
second part'

يسمح هذا بإنشاء سلسلة من سطرين ، لكنها تُعرض في سطر واحد فقط:

first part second part

لتصيير السلسلة على عدة أسطر أيضًا ، تحتاج صراحة إلى إضافة\nفي نهاية كل سطر ، مثل هذا:

const string =
  'first line\n \
second line'

أو

const string = 'first line\n' + 'second line'

تجعل القوالب الحرفية السلاسل متعددة الأسطر أبسط بكثير.

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

const string = `Hey
this

string
is awesome!`

ضع في اعتبارك أن المساحة لها معنى ، لذا افعل هذا:

const string = `First
                Second`

سينشئ سلسلة مثل هذا:

First
                Second

an easy way to fix this problem is by having an empty first line, and appending the trim() method right after the closing backtick, which will eliminate any space before the first character:

const string = `
First
Second`.trim()

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings.

You do so by using the ${...} syntax:

const myVariable = 'test'
const string = `something ${myVariable}` //something test

inside the ${} you can add anything, even expressions:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

Template tags

Tagged templates is one feature that might sound less useful at first for you, but it’s actually used by lots of popular libraries around, like Styled Components or Apollo, the GraphQL client/server lib, so it’s essential to understand how it works.

In Styled Components template tags are used to define CSS strings:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

In Apollo template tags are used to define a GraphQL query schema:

const query = gql`
  query {
    ...
  }
`

The styled.button and gql template tags highlighted in those examples are just functions:

function gql(literals, ...expressions) {}

this function returns a string, which can be the result of any kind of computation.

literals is an array containing the template literal content tokenized by the expressions interpolations.

expressions contains all the interpolations.

If we take an example above:

const string = `something ${1 + 2 + 3}`

literals is an array with two items. The first is something, the string until the first interpolation, and the second is an empty string, the space between the end of the first interpolation (we only have one) and the end of the string.

expressions in this case is an array with a single item, 6.

A more complex example is:

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

in this case literals is an array where the first item is:

;`something
another `

the second is:

;`
new line `

and the third is:

;`
test`

expressions in this case is an array with two items, x and 6.

The function that is passed those values can do anything with them, and this is the power of this kind feature.

The most simple example is replicating what the string interpolation does, by joining literals and expressions:

const interpolated = interpolate`I paid ${10}€`

and this is how interpolate works:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions.entries()) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

More js tutorials: