String

Serangkaian karakter apa pun—huruf, angka, simbol, dan sebagainya—di antara kumpulan tanda kutip ganda ("), tanda kutip tunggal ('), atau tanda kutip terbalik (`) adalah primitif string. Anda telah melihat beberapa contoh {i>string<i} di kursus ini: instance console.log di modul sebelumnya berisi atau primitif string.

console.log( "Hello, World." );
> Hello, World.

"Hello, World." adalah primitif string. Anda mendapatkan hasil yang sama dengan satu tanda kutip atau {i>backticks<i}:

console.log( 'Hello, World.' );
> Hello, World.

console.log(`Hello, World.`);
> Hello, World.

Rangkaian karakter yang diapit tanda kutip disebut string literal. Tanda kutip ganda dan tunggal berperilaku dengan cara yang sama, dan satu dapat berisi yang lainnya sebagai karakter dalam string itu sendiri:

console.log( "I'm a string." );
> I'm a string.

console.log( '"A string," I said.' );
> "A string," I said.

Instance karakter mencakup yang sama dalam string "ditutup" tindakan string, kemungkinan menyebabkan error:

console.log( '"I'm a string," I said.' );
> Uncaught SyntaxError: missing ) after argument list

Untuk menghindarinya, konversikan karakter menggunakan garis miring terbalik (/):

console.log( '"I\'m a string," I said.' );
> "I'm a string," I said.

Objek string

Saat dipanggil sebagai fungsi, objek String akan memaksa nilai yang ditentukan ke literal string.

let myString = String( 10 );

myString
> "10"

typeof myString
> string

Seperti yang dijelaskan dalam pewarisan prototipe, Anda tidak perlu lagi menggunakan objek String sebagai konstruktor. Ini menciptakan objek string yang berisi nilai yang ditentukan, beserta metode dan properti yang sudah disediakan oleh objek String, bukan literal string.

let stringObj = new String( "My new string." );

typeof stringObj
> object

stringObj
> String { "My new string." }

Penyambungan

Jika digunakan dalam konteks string, bukan angka, satu tanda plus (+) bertindak sebagai operator penyambungan, yang menggabungkan beberapa nilai {i>string<i} menjadi satu {i>string<i}:

console.log( "My" + " string." );
> My string.

Literal string dan literal template

Tanda kutip tunggal, tanda kutip ganda, dan {i>backtick<i} dapat digunakan secara bergantian untuk menciptakan primitif string. Namun, Anda juga dapat menggunakan tanda petik terbalik untuk menentukan literal template (terkadang disebut "string template"). Tidak seperti literal string yang dibuat dengan tanda kutip tunggal atau ganda, literal template memungkinkan untuk {i>string<i} multi-baris dan interpolasi {i>string<i}.

const myString = "This
is a string.";
> Uncaught SyntaxError: "" string literal contains an unescaped line break

const myString = `This
is a string.`;

console.log( myString );

> This
is a string.

Literal template dapat berisi ekspresi placeholder yang ditandai dengan tanda dolar dan tanda kurung kurawal (${}). Placeholder ini "diinterpolasi" secara {i>default<i}, artinya hasil ekspresi menggantikan placeholder di {i>string<i}.

console.log( "The result is " + ( 2 + 4 ) + "." );
> The result is 6.

console.log( `The result is ${ 2 + 4 }.` );
> The result is 6.

Literal template dapat diteruskan ke fungsi kustom untuk membuat template bertag, panggilan fungsi yang menggunakan satu literal template sebagai kumpulan argumen dan memungkinkan placeholder-nya diisi berdasarkan logika yang ditentukan penulis.

Argumen pertama fungsi tag berisi susunan nilai string, dan argumen yang tersisa menentukan placeholder. Array nilai {i>string<i} ini adalah dibuat dengan "membelah" literal {i>template<i} di setiap {i>placeholder<i} yang ada di dalamnya. Elemen pertama dalam array berisi karakter apa pun hingga placeholder pertama, elemen kedua berisi karakter apa pun antara placeholder pertama dan kedua, dan seterusnya. Setiap placeholder diteruskan ke fungsi tag sebagai nilai mandiri dengan placeholder terkait.

const myNoun = "template literal";

function myTagFunction( myStrings, myPlaceholder ) {
    const myInitialString = myStrings[ 0 ];
    console.log( `${ myInitialString }modified ${ myPlaceholder }.` );
}

myTagFunction`I'm a ${ myNoun }.`;
> "I'm a modified template literal."

Menguji pemahaman Anda