Bagaimana Anda Memformat String dalam JavaScript?

Dalam JavaScript, string adalah sekelompok karakter yang diapit oleh sepasang tanda kutip tunggal atau ganda. Ada banyak cara untuk memformat string dalam JavaScript.

Anda dapat menggunakan metode atau operator tertentu untuk menggabungkan string. Anda bahkan dapat melakukan operasi khusus untuk menentukan string apa yang muncul di mana dan kapan.

Pelajari cara memformat string JavaScript menggunakan metode penggabungan dan literal template.

Penggabungan String

JavaScript memungkinkan Anda menggabungkan string menggunakan beberapa pendekatan. Pendekatan yang bermanfaat adalah concat() metode. Metode ini menggunakan dua atau lebih string. Itu menggunakan satu string panggilan dan mengambil satu atau lebih string sebagai argumen.

const nama depan = "Yohanes";
const nama belakang = "Kelinci betina";
membiarkan stringVal;
stringVal = firstName.concat("", nama keluarga);
menghibur.log (stringVal);

Di sini, concat menggabungkan argumen string (spasi kosong dan lastName) ke string pemanggil (firstName). Kode kemudian menyimpan string baru yang dihasilkan dalam variabel (stringVal) dan mencetak nilai baru ke konsol browser:

Cara lain untuk menggabungkan kumpulan string adalah dengan menggunakan operator plus. Metode ini memungkinkan Anda menggabungkan variabel string dan literal string untuk membuat string baru.

const nama depan = "Yohanes";
cons nama tengah = "Mike";
const nama belakang = "Kelinci betina";
membiarkan stringVal;
stringVal = nama depan + "" + nama tengah + "" + nama belakang;
menghibur.log (stringVal);

Kode di atas mencetak output berikut ke konsol:

Pendekatan ketiga untuk menggabungkan string JavaScript Anda memerlukan penggunaan tanda tambah dan sama dengan. Metode ini memungkinkan Anda menambahkan string baru ke akhir string yang sudah ada.

const nama depan = "Yohanes";
const nama belakang = "Kelinci betina";
membiarkan stringVal;
stringVal = nama depan;
stringVal += "";
stringVal += lastName;
menghibur.log (stringVal);

Kode ini menambahkan spasi kosong dan nilai variabel lastName ke variabel firstName, menghasilkan keluaran berikut:

Templat Literal

Templat literal adalah fitur ES6 yang memungkinkan Anda memformat string JavaScript. Literal template menggunakan sepasang backticks (`) untuk menampilkan string. Metode pemformatan string ini memungkinkan Anda untuk menampilkan string multiline yang lebih bersih di JavaScript.

membiarkan html;
html = `<ul>
<li> Nama: John Doe </li>
<li> Umur: 24 </li>
<li> Pekerjaan: Insinyur Perangkat Lunak </li>
</ul>`;
dokumen.body.innerHTML = html;

Kode JavaScript di atas memanfaatkan HTML untuk mencetak daftar tiga item di browser:

Untuk mencapai hasil yang sama tanpa templat literal (atau sebelum templat literal), Anda perlu menggunakan tanda kutip. Namun, Anda tidak akan dapat memperluas kode ke beberapa baris seperti yang Anda bisa lakukan dengan literal template.

membiarkan html;
html = "<ul><li>Nama: John Doe</li><li>Umur: 24</li><li>Pekerjaan: Insinyur Perangkat Lunak</li></ul>";
dokumen.body.innerHTML = html;

Interpolasi String

Literal template memungkinkan Anda menggunakan ekspresi dalam string JavaScript melalui proses yang disebut interpolasi. Dengan interpolasi string, Anda dapat menyematkan ekspresi atau variabel dalam string Anda menggunakan ${ekspresi} placeholder. Di sinilah nilai literal template JavaScript menjadi sangat jelas.

biarkan namapengguna = "Jane Doe";
membiarkan umur = 21;
biarkan pekerjaan = "Pengembang Web";
membiarkan pengalaman = 3;
membiarkan html;
html = `<ul>
<li> Nama: ${userName} </li>
<li> Umur: ${umur} </li>
<li> Jabatan: ${job} </li>
<li> Tahun Pengalaman: ${pengalaman} </li>
<li> Tingkat Pengembang: ${pengalaman < 5? "Junior hingga Menengah": "Senior"} </li>
</ul>`;
dokumen.body.innerHTML = html;

Kode di atas menghasilkan keluaran berikut di konsol:

Empat argumen pertama dari ${ekspresi} placeholder adalah variabel string, tetapi yang kelima adalah ekspresi bersyarat. Ekspresi bergantung pada nilai salah satu variabel (pengalaman), untuk menentukan apa yang harus ditampilkan di browser.

Memformat Elemen di Halaman Web Anda Dengan JavaScript

Terlepas dari asosiasi fungsionalnya dengan pengembangan halaman web, JavaScript bekerja dengan HTML untuk memengaruhi desain dan tata letak halaman web. Itu dapat memanipulasi teks yang muncul di halaman web, seperti halnya dengan template literal.

Ia bahkan dapat mengonversi HTML menjadi gambar dan menampilkannya di halaman web.