Jalur untuk Memahami Literal Template di JavaScript

Spesifikasi ECMAScript, dirilis pada 2015 ( ES6 ), menambahkan fitur baru ke JavaScript - literal template. Literal template memberi kita mekanisme baru untuk membuat nilai string... Mekanisme ini memiliki banyak fitur canggih, seperti menyederhanakan pembuatan konstruksi multi-baris dan menggunakan placeholder untuk menyematkan hasil ekspresi dalam string. Selain itu, ada kemungkinan lain di sini - literal templat yang diberi tag. Ini adalah bentuk tambahan dari template literal. Template tag memungkinkan Anda membuat string menggunakan ekspresi di dalam string dan menggunakan fungsi khusus. Semua ini memperluas kemampuan programmer untuk bekerja dengan string, memungkinkan, misalnya, untuk membuat string dinamis yang dapat berupa URL , atau menulis fungsi untuk menyempurnakan elemen HTML .







Pada artikel ini, Anda akan mempelajari perbedaan antara nilai string biasa, ditentukan dengan tanda kutip tunggal atau ganda, dan literal template. Anda akan belajar tentang berbagai cara mendeklarasikan string dengan karakteristik berbeda, termasuk string multiline dan string dinamis yang berubah bergantung pada nilai variabel atau ekspresi. Anda akan mempelajari cara bekerja dengan template tag dan melihat contoh nyata penggunaannya.

Mendeklarasikan string

Di bagian ini, kita mengingat bagaimana string dideklarasikan menggunakan tanda kutip tunggal atau ganda, dan kemudian melihat bagaimana hal yang sama dilakukan saat menggunakan template literal.



String JavaScript dapat dianggap sebagai urutan karakter yang diapit tanda kutip tunggal ( ' '):

const single = 'Every day is a good day when you paint.'

Cara lain untuk mendeklarasikan string adalah dengan menggunakan tanda kutip ganda ( " "):

const double = "Be so very light. Be a gentle whisper."

Dalam JavaScript, tidak ada perbedaan utama antara string semacam itu. Dalam bahasa lain, penggunaan tanda kutip yang berbeda saat mendeklarasikan string dapat berarti, misalnya, string dari satu jenis dapat diinterpolasi sedangkan jenis lainnya tidak. Di sini yang kami maksud dengan "interpolasi" adalah kemampuan untuk menghitung nilai ekspresi placeholder yang memainkan peran bagian dinamis dari string dan berpartisipasi dalam pembentukan nilai string yang dihasilkan.



String mana yang digunakan ketika dideklarasikan dengan tanda kutip tunggal atau ganda sebagian besar adalah masalah preferensi pribadi dan konvensi pengkodean. Namun, jika string yang dibatasi oleh salah satu jenis kutipan ini berisi tanda kutip dari jenis yang sama, string tersebut harus di- escape . Kutipan jenis lain dalam string seperti itu tidak perlu diloloskan.

//     ,   
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'

//     ,   
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"

console.log(single);
console.log(double);

Memanggil sepasang metode log()akan menghasilkan dua baris identik yang dikirim ke konsol .

"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross

Literal template, di sisi lain, dideklarasikan menggunakan backticks ( ` `):

const template = `Find freedom on this canvas.`

Tidak perlu menghilangkan tanda kutip tunggal atau ganda di sini:

const template = `"We don't make mistakes. We just have happy accidents." - Bob Ross

Tapi pukulan balik dalam string seperti itu harus di-escape:

const template = `Template literals use the \` character.`

Literal template memiliki semua kemampuan string biasa. Oleh karena itu, Anda mungkin dapat mengganti semua string dalam proyek Anda dengan template literal tanpa kehilangan apapun. Namun, paling sering, konvensi pengkodean menetapkan bahwa literal template hanya boleh digunakan ketika kemampuan khususnya diperlukan. String biasa selalu dideklarasikan menggunakan tanda kutip tunggal atau ganda untuk menjaga konsistensi kode. Basis kode proyek, saat menulis yang mengikuti standar ini, akan lebih mudah dibaca untuk pengembang yang sebelumnya tidak terbiasa dengannya.



Sekarang setelah kita berbicara tentang mendeklarasikan string menggunakan tanda kutip tunggal, tanda kutip ganda, dan tanda kutip belakang, kita dapat melanjutkan ke pemeriksaan kekuatan pertama literal template. Yaitu - untuk kemungkinan menjelaskan string multi-baris.

String multiline

Di bagian ini, pertama kita akan berbicara tentang bagaimana string multiline dideklarasikan sebelum ES6, lalu kita akan melihat bagaimana literal template menyederhanakan tugas ini.



Awalnya, jika Anda harus memasukkan variabel string yang terdiri dari beberapa baris di editor teks, operator penggabungan string digunakan . Contoh penggabungan string berikut menggambarkan ide ini:

const address =
  'Homer J. Simpson' +
  '742 Evergreen Terrace' +
  'Springfield'

Pendekatan ini memungkinkan Anda untuk memecah baris panjang menjadi potongan-potongan kecil dan mengaturnya dalam editor teks pada beberapa baris. Tapi ini sama sekali tidak mempengaruhi bagaimana baris terakhir akan berubah. Dalam hal ini, nilai konstanta string akan ditempatkan pada satu baris. Bagian dari mana nilai string dirangkai tidak akan dipisahkan oleh feed baris atau spasi. Jika Anda mencetak konstanta ke konsol address, berikut ini akan muncul di sana:

Homer J. Simpson742 Evergreen TerraceSpringfield

Pendekatan lain untuk menulis baris seperti itu di editor kode adalah dengan menggunakan karakter garis miring terbalik ( \), yang ditempatkan di akhir fragmen baris, dan setelah itu, pada baris baru, fragmen baru ditempatkan:

const address =
  'Homer J. Simpson\
  742 Evergreen Terrace\
  Springfield'

Pendekatan ini mempertahankan, misalnya, spasi sebelum fragmen baris, tetapi nilai variabel, jika dicetak ke konsol, akan kembali diwakili oleh satu baris:

Homer J. Simpson  742 Evergreen Terrace  Springfield

Anda bisa membuat string multiline nyata menggunakan karakter linefeed ( \n):

const address =
  'Homer J. Simpson\n' +
  '742 Evergreen Terrace\n' +
  'Springfield'

Saat menampilkan nilai string yang disimpan di konsol address, nilai ini akan menjangkau beberapa baris:

Homer J. Simpson
742 Evergreen Terrace
Springfield

Namun, menggunakan karakter baris baru untuk membuat string multibaris tidak terlalu nyaman dan mudah. Di sisi lain, membuat string multi-baris menggunakan template literal jauh lebih mudah dan nyaman. Tidak perlu menggabungkan string, tidak perlu menggunakan baris baru atau garis miring terbalik. Untuk membuat string multi-baris menggunakan template literal, caranya cukup sederhana, di akhir fragmen baris berikutnya, tekan tombol Enter, dan lanjutkan ke baris berikutnya dari template literal:

const address = `Homer J. Simpson
742 Evergreen Terrace
Springfield`

Jika Anda mengeluarkan konstanta ini ke konsol, teksnya akan terlihat sama seperti di editor:

Homer J. Simpson
742 Evergreen Terrace
Springfield

Di sini harus diingat bahwa jika ada spasi di antara backticks yang digunakan untuk menyelaraskan kode, spasi ini akan dimasukkan dalam literal template terakhir. Perhatikan contoh berikut:

const address = `Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield`

Meskipun gaya pengkodean ini membuatnya lebih mudah untuk dibaca, apa yang masuk ke konsol setelah dikeluarkan tidak akan terlihat sangat menarik:

Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield

Sekarang, setelah berurusan dengan string multi-baris, mari kita bicara tentang bagaimana Anda dapat menyematkan hasil evaluasi berbagai ekspresi ke dalam string yang dideklarasikan dengan cara yang berbeda, yaitu, mari kita bicara tentang ekspresi interpolasi.

Ekspresi Interpolasi

Sebelumnya, sebelum ES6, penggabungan digunakan untuk membuat string dinamis yang dibentuk oleh nilai variabel atau ekspresi:

const method = 'concatenation'
const dynamicString = 'This string is using ' + method + '.'

Jika Anda mengeluarkan dynamicStringke konsol, Anda mendapatkan yang berikut:

This string is using concatenation.

Saat menggunakan literal template, ekspresi dapat disematkan dalam string menggunakan placeholder. Placeholder adalah konstruksi tampilan ${}. Dalam hal ini, semua yang terdapat dalam kurung kurawal dianggap sebagai kode JavaScript, dan semua yang di luar konstruksi ini dianggap sebagai string:

const method = 'interpolation'
const dynamicString = `This string is using ${method}.`

Saat mengeluarkan dynamicStringke konsol, Anda mendapatkan hasil sebagai berikut:

This string is using interpolation.

Contoh umum nilai penyematan dalam string adalah membuat URL dinamis. Penggunaan rangkaian untuk tujuan ini mengarah pada tampilan konstruksi yang tidak praktis dan tidak nyaman. Misalnya, berikut adalah fungsi yang menghasilkan string akses OAuth :

function createOAuthString(host, clientId, scope) {
  return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

Jika Anda mencetak hasil dari fungsi ini ke konsol, Anda mendapatkan yang berikut:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

Saat menggunakan interpolasi, programmer tidak perlu lagi berhati-hati tentang tanda kutip yang membatasi bagian dari string, dan di mana tepatnya operator penggabungan berada. Berikut adalah contoh yang sama, ditulis ulang menggunakan literal template:

function createOAuthString(host, clientId, scope) {
  return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

Hasil dari fungsinya adalah sebagai berikut:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

Anda dapat menggunakan metode trim () untuk menghapus spasi kosong di depan dan di belakang dari string yang dibuat dengan literal template . Misalnya, dalam cuplikan kode berikut untuk membuat elemen HTMLdengan referensi kustom, fungsi panah digunakan :

const menuItem = (url, link) =>
  `
<li>
  <a href="${url}">${link}</a>
</li>
`.trim()

menuItem('https://google.com', 'Google')

Ruang depan dan belakang akan dihapus dari baris terakhir untuk memastikan bahwa elemen dirender dengan benar:

<li>
  <a href="https://google.com">Google</a>
</li>

Seluruh ekspresi dapat diinterpolasi, bukan hanya variabel. Misalnya - seperti di sini, di mana hasil penambahan dua angka disematkan dalam sebuah string:

const sum = (x, y) => x + y
const x = 5
const y = 100
const string = `The sum of ${x} and ${y} is ${sum(x, y)}.`

console.log(string)

Di sini fungsi sum()dan konstanta dideklarasikan xdan y. Setelah itu, garis tersebut menggunakan fungsi dan konstanta ini. Ini adalah tampilan konstanta stringsaat dicetak ke konsol:

The sum of 5 and 100 is 105.

Mekanisme ini dapat sangat berguna saat menggunakan operator terner , yang memungkinkan Anda memeriksa kondisi saat membentuk string:

const age = 19
const message = `You can ${age < 21 ? 'not' : ''} view this page`
console.log(message)

Konstanta yang messagedicetak ke konsol dapat berubah, bergantung pada apakah lebih besar atau kurang dari 21, nilai yang disimpan di age. Karena nilai ini adalah 19 dalam contoh kami, berikut ini akan dikirim ke konsol:

You can not view this page

Sekarang Anda tahu bagaimana Anda bisa mendapatkan keuntungan dari interpolasi ekspresi saat menggunakan literal template. Di bagian selanjutnya, kita akan melangkah lebih jauh dan mengeksplorasi pola penandaan, dan berbicara tentang bekerja dengan ekspresi yang diteruskan dalam cakupan yang cocok dengan placeholder.

Template tag

Templat tag adalah bentuk tambahan dari templat literal. Template yang diberi tag dimulai dengan fungsi yang diberi tag yang mengurai literal template, memberi pengembang kontrol lebih besar atas proses pembuatan string dinamis.



Dalam contoh berikut, kami membuat fungsi tagyang kami rencanakan untuk digunakan dalam peran fungsi yang melakukan operasi pada template tag. Parameter bernama pertama untuk fungsi ini stringsadalah larik literal string. Ekspresi sebaris ditempatkan di parameter kedua menggunakan sintaks dari parameter yang tersisa . Untuk melihat konten parameter ini, mereka dapat ditampilkan di konsol:

function tag(strings, ...expressions) {
  console.log(strings)
  console.log(expressions)
}

Jika Anda menggunakan fungsi saat membuat template tag tag, Anda bisa mendapatkan konstruksi berikut:

const string = tag`This is a string with ${true} and ${false} and ${100} interpolated inside.`

Karena fungsi tagmelakukan output ke konsol stringsdan expressions, ketika menjalankan kode ini, berikut ini akan dikirim ke konsol:

["This is a string with ", " and ", " and ", " interpolated inside."]
[true, false, 100]

Anda dapat melihat bahwa parameter pertama strings,, adalah array yang berisi semua string literal:

"This is a string with "
" and "
" and "
" interpolated inside."

Argumen ini juga memiliki properti rawyang bisa Anda rujuk sebagai strings.raw. Ini berisi baris di mana tidak ada urutan pelolosan yang telah diproses. Misalnya, itu \nhanya akan menjadi karakter \n, bukan perintah umpan baris.



Argumen kedua ,, ...expressionsadalah larik yang berisi semua ekspresi:

true
false
100

Hasilnya adalah tagstring literal dan ekspresi diteruskan ke fungsi template tag . Perhatikan bahwa fungsi tersebut tidak diperlukan untuk mengembalikan string. Itu dapat bekerja dengan nilai yang diteruskan padanya dan mengembalikan apa pun. Misalnya, kami mungkin memiliki fungsi yang tidak memperhatikan apa pun dan hanya mengembalikan null. Beginilah cara fungsi tersebut ditulis returnsNulldalam contoh berikut:

function returnsNull(strings, ...expressions) {
  return null
}

const string = returnsNull`Does this work?`
console.log(string)

Sebagai hasil dari mengeksekusi kode ini, berikut ini akan muncul di konsol:

null

Sebagai contoh dari apa yang dapat Anda lakukan dalam template yang diberi tag, Anda dapat membuat perubahan pada setiap ekspresi, seperti perubahan untuk menyertakan ekspresi dalam tag HTML. Mari kita membuat fungsi boldyang menambahkan tag ke <strong>kedua </strong>awal dan akhir setiap ekspresi:

function bold(strings, ...expressions) {
  let finalString = ''

  //    
  expressions.forEach((value, i) => {
    finalString += `${strings[i]}<strong>${value}</strong>`
  })

  //    
  finalString += strings[strings.length - 1]

  return finalString
}

const string = bold`This is a string with ${true} and ${false} and ${100} interpolated inside.`

console.log(string)

Di sini, expressionsloop forEach digunakan untuk melintasi array . Setiap elemen diapit tag <strong></strong>.

This is a string with <strong>true</strong> and <strong>false</strong> and <strong>100</strong> interpolated inside.

Di pustaka JavaScript populer, Anda dapat menemukan beberapa contoh penggunaan template tag. Misalnya, pustaka tag graphql menggunakan literal template gqluntuk mengurai string kueri GraphQL dan mengubahnya menjadi pohon sintaks abstrak (AST) yang dipahami GraphQL:

import gql from 'graphql-tag'

//        5
const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`

Pustaka komponen bergaya juga menggunakan fungsi penandaan untuk membuat komponen React baru dari elemen DOM reguler dan menerapkan gaya CSS tambahan padanya :

import styled from 'styled-components'

const Button = styled.button`
  color: magenta;
`

// <Button>     

Alternatifnya, Anda dapat menggunakan metode String.raw standar untuk menerapkannya ke template yang diberi tag guna mencegah pemrosesan urutan pelolosan:

const rawString = String.raw`I want to write /n without it being escaped.`
console.log(rawString)

Berikut ini akan muncul di konsol setelah menjalankan kode ini:

I want to write /n without it being escaped.

Hasil

Pada artikel ini, kita mengingat informasi dasar tentang literal string biasa, yang diformat dengan tanda kutip tunggal atau ganda, dan juga berbicara tentang literal template dan template tag. Literal template menyederhanakan banyak tugas pemrosesan string. Secara khusus, kita berbicara tentang penyematan nilai yang berbeda dalam string dan tentang membuat string multi-baris tanpa menggunakan penggabungan atau pelolosan. Penandaan adalah fitur literal templat tingkat lanjut yang berguna yang digunakan di banyak pustaka populer.



Apakah Anda menggunakan literal template?