Anda akan menemukan tiga pendekatan berbeda untuk menghasilkan string multi-baris dalam JavaScript di posting ini.

Saya akan mulai dengan membahas dasar-dasar string dalam JavaScript dan cara menggunakan template literal. Kemudian, dengan menggunakan contoh kode di sepanjang jalan, Anda akan menemukan cara membuat string yang mencakup banyak baris.



Dalam JavaScript, apa itu String? Pengantar Pembuatan String JS

String adalah alat yang berguna untuk komunikasi teks.

Kumpulan nilai karakter yang terorganisir dikenal sebagai string. Sebuah string secara khusus merupakan kumpulan dari satu atau lebih karakter, yang dapat berupa huruf, angka, atau simbol (seperti tanda baca).

Di JavaScript, Anda dapat membuat string dengan salah satu dari tiga cara berikut:

  1. Dengan menggunakan tanda kutip tunggal.
  2. Dengan menggunakan tanda kutip ganda.
  3. Dengan menggunakan backtick.

Berikut cara menggunakan tanda kutip tunggal untuk menghasilkan string:

// string created using single quotes ('')
let favePhrase = 'Hello World!';

Berikut cara menggunakan tanda kutip ganda untuk menghasilkan string:

// string created using double quotes ("")
let favePhrase = "Hello World!";

Berikut cara menggunakan backtick untuk menghasilkan string:

// string created using backticks (``)
let favePhrase = `Hello World!`;

Literal template adalah metode JavaScript terakhir untuk menghasilkan string.

Frase Favorit diberi variabel sendiri.

Saya memasukkan string Hello World! yang telah saya hasilkan dengan tiga cara berbeda ke dalam variabel.

Dengan meneruskan nama variabel ke console.log();, Anda dapat melihat keluaran string di konsol browser.

Misalnya, saya akan melakukan hal berikut jika saya ingin memeriksa hasil string yang dibuat dengan tanda kutip ganda:

// string created using double quotes ("")
let favePhrase = "Hello World!";

// print string to the console
console.log(favePhrase);

// output

// Hello World!

Tidak ada perbedaan antara menggunakan tanda kutip tunggal atau ganda saat membuat string.

Anda dapat memutuskan apakah akan menggunakan salah satunya—atau keduanya—di seluruh file. Namun demikian, adalah bijaksana untuk menjaga konsistensi di seluruh file Anda.

Pastikan untuk menggunakan kutipan yang sama di kedua sisi saat membuat string.

// Don't do this
let favePhrase = 'Hello World!";

console.log(favePhrase);

// output

// Uncaught SyntaxError: Invalid or unexpected token (at test.js:2:18)

Anda dapat menggunakan satu jenis kutipan di dalam yang lain, yang merupakan poin penting lainnya untuk diingat.

Misalnya, Anda dapat menggunakan tanda kutip tunggal di dalam tanda kutip ganda sebagai berikut:

let favePhrase = 'My fave phrase is "Hello World"!';

Periksa untuk memastikan tanda kutip dalam tidak cocok dengan tanda kutip luar karena ini salah:

// Don't do this
let favePhrase = 'My fave phrase is 'Hello World'! ';

console.log(favePhrase)


// output

//Uncaught SyntaxError: Unexpected identifier (at test.js:2:38)

Masalah yang sama muncul ketika apostrof dicoba digunakan di dalam tanda kutip tunggal:

// Don't do this
let favePhrase = 'My fave phrase is "Hello world"! Isn't it awesome?';

console.log(favePhrase);

// output

// Uncaught SyntaxError: Unexpected identifier (at test.js:3:56)

Itu berhasil ketika saya menggunakan kutipan tunggal di dalam tanda kutip ganda. Namun, kodenya rusak ketika saya menambahkan apostrof.

Untuk membuat fungsi ini, hapus tanda kutip tunggal dengan memasukkan karakter escape:

let favePhrase = 'My fave phrase is \'Hello World\'! ';

console.log(favePhrase);

// output

// My fave phrase is 'Hello World'!

Agar apostrof berfungsi, Anda perlu:

let favePhrase = 'My fave phrase is "Hello world"! Isn\'t it awesome?';

console.log(favePhrase);

// output

// My fave phrase is "Hello world"! Isn't it awesome?

Apa itu Literal Template dalam JavaScript? Mengapa dan Bagaimana Menggunakan Literal Templat JavaScript

Seperti yang Anda lihat sebelumnya, backtick diperlukan untuk menghasilkan literal template.

Dengan munculnya ES6, template literal, Anda dapat menggunakan string untuk menjalankan tugas yang lebih rumit.

Salah satunya adalah kapasitas untuk menyisipkan variabel dalam string, seperti di:

let firstName = 'John';
let lastName = 'Doe';

console.log(`Hi! My first name is ${firstName} and my last name is ${lastName}!`);

// output

//Hi! My first name is John and my last name is Doe!

Dalam contoh yang disebutkan di atas, saya membuat dua variabel, firstName dan lastName, dan karenanya menyimpan nama depan dan belakang seseorang.

Saya kemudian mencetak sebuah string dengan backticks, sering dikenal sebagai template literal, menggunakan console.log().

Saya memasukkan kedua variabel tersebut ke dalam string.

Saya melakukan ini dengan melampirkan nama variabel dalam tanda dolar ($), sebuah teknik yang dikenal sebagai interpolasi string yang memungkinkan Anda memasukkan variabel tanpa harus menggabungkannya seperti berikut:

let firstName = 'John';
let lastName = 'Doe';

console.log("Hi! My first name is " + firstName + " and my last name is " + lastName + "!");

// output

// Hi! My first name is John and my last name is Doe!

Selain itu, Anda dapat menggunakan apostrof, tanda kutip tunggal, dan tanda kutip ganda di dalam literal templat tanpa harus menghindarinya:

let favePhrase = `My fave phrase is "Hello World" ! Isn't it awesome?`

console.log(favePhrase);

// output

// My fave phrase is "Hello World" ! Isn't it awesome?

Di bagian selanjutnya, Anda akan mempelajari cara membuat string multibaris menggunakan literal string.


Cara Menulis String JavaScript Multi Baris

Ada tiga teknik untuk menghasilkan string yang menjangkau beberapa baris:

  • memanfaatkan literal dari template.
  • dengan memanfaatkan operator penggabungan JavaScript, operator +.
  • Menggunakan karakter escape dan operator garis miring terbalik () di JavaScript.

Untuk membuat string yang membentang beberapa baris menggunakan tanda kutip tunggal atau ganda daripada literal templat, Anda harus menggunakan operator + atau operator.


Cara Menggunakan Template Literal di JavaScript untuk Membuat Multi Line Strings

Anda dapat menghasilkan string yang membentang beberapa baris menggunakan template literal:

let learnCoding = `How to start learning web development?
- Learn HTML
- Learn CSS
- Learn JavaScript
Use freeCodeCamp to learn all the above and much, much more !
`

console.log(learnCoding);


// output

// How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more !

Metode paling sederhana untuk membuat string multi-baris adalah dengan menggunakan template literal.


Cara Menggunakan JavaScript + Operator Operator untuk Membuat String Multi Baris

Inilah cara Anda menulis ulang contoh yang identik dari bagian sebelumnya menggunakan tanda tambah (+):

let learnCoding = 'How to start learning web development?' +
' - Learn HTML' +
' - Learn CSS' +
' - Learn JavaScript' +
' Use freeCodeCamp to learn all the above and much, much more!'


console.log(learnCoding);

// output

// How to start learning web development?  - Learn HTML - Learn CSS - Learn JavaScript Use freeCodeCamp to learn all the above and much, much more!

Untuk membuat kalimat muncul di baris baru, Anda juga perlu menggunakan karakter baris baru (n):

let learnCoding = 'How to start learning web development?\n' +
' - Learn HTML\n' +
' - Learn CSS\n' +
' - Learn JavaScript\n' +
' Use freeCodeCamp to learn all the above and much, much more!'


console.log(learnCoding);

// output

//How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more!

Cara Membuat Multi Line String di JavaScript Menggunakan Operator \

Inilah cara Anda menulis ulang contoh bagian sebelumnya jika Anda ingin memanfaatkan operator:

let learnCoding = 'How to start learning web development? \n \
 - Learn HTML \n \
 - Learn CSS\n  \
 - Learn JavaScript \n \
Use freeCodeCamp to learn all the above and much, much more!'
 

console.log(learnCoding);

// output

// let learnCoding = 'How to start learning web development? \n \
// - Learn HTML \n \
// - Learn CSS\n  \
// - Learn JavaScript \n \
//Use freeCodeCamp to learn all the above and much, much more!'

Dalam contoh ini, saya menggunakan tanda kutip tunggal untuk menghasilkan string multi-baris.

Untuk membuat string merentang banyak baris, pertama-tama saya harus menggunakan karakter baris baru n, lalu operator.

Pastikan operator muncul setelah karakter baris baru (n).