Ciąg znaków

Dowolny zestaw znaków (liter, cyfr, symboli itd.) znajdujący się między podwójnymi cudzysłowami ("), pojedynczymi cudzysłowami (') lub grawisami (`) jest prymitywnym ciągiem znaków. Poznaliśmy już kilka przykładów ciągów tekstowych w tym kursie: wystąpienia pola console.log w poprzednim module zawierały obiekty podstawowe typu ciągi znaków.

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

"Hello, World." jest ciągiem podstawowym. Ten sam wynik można uzyskać, pojedynczym cudzysłowem lub grawisem:

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

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

Ciąg znaków w cudzysłowach jest nazywany literalem ciągu. Podwójne i pojedyncze cudzysłowy działają tak samo – jeden z nich może zawierać drugi znak jako znak w samym ciągu znaków:

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

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

Wystąpienie tego samego znaku towarowego w ciągu znaków „zamyka” ciąg znaków, prawdopodobnie powodując błędy:

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

Aby tego uniknąć, użyj ukośnika lewego (``):

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

Obiekt typu ciąg znaków

Wywoływany jako funkcja obiekt String przekształca określoną wartość na literał ciągu znaków.

let myString = String( 10 );

myString
> "10"

typeof myString
> string

Jak szczegółowo opisano w sekcji dziedziczenie prototypowe, rzadko trzeba używać obiektu String jako konstruktora. Zamiast literału ciągu znaków tworzy obiekt typu ciąg znaków zawierający określoną wartość obok metod i właściwości dostępnych już przez obiekt String.

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

typeof stringObj
> object

stringObj
> String { "My new string." }

Połączenie

W kontekście ciągów znaków zamiast liczb pojedynczy znak plus (+) działa jako operator konkatenacji, łącząc wiele wartości w jednym ciągu znaków:

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

literały ciągów i literały szablonów

Do tworzenia podstawowych ciągów znaków można używać zamiennie cudzysłowów pojedynczych, podwójnych i grawisowych. Możesz też jednak używać grawisów do określania literałów szablonów (czasami zwanych „ciągami szablonów”). W przeciwieństwie do literałów ciągów znaków tworzonych przy użyciu cudzysłowów pojedynczych lub podwójnych, literały szablonów umożliwiają stosowanie ciągów wielowierszowych i interpolacji ciągów znaków.

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.

Literały szablonów mogą zawierać wyrażenia zastępcze oznaczone znakiem dolara i nawiasami klamrowymi (${}). Symbole zastępcze są domyślnie „interpolowane”, co oznacza, że wynik wyrażenia zastępuje obiekt zastępczy w końcowym ciągu znaków.

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

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

Literał szablonu można przekazać do funkcji niestandardowej, aby utworzyć szablon otagowany – wywołanie funkcji, która korzysta z pojedynczego literału szablonu jako zestawu argumentów i umożliwia wypełnianie obiektów zastępczych zgodnie z logiką zdefiniowaną przez autora.

Pierwszy argument funkcji tagu zawiera tablicę wartości ciągów, a pozostałe argumenty definiują obiekty zastępcze. Ta tablica wartości ciągów jest tworzona przez „podzielenie” literału szablonu z każdym obiektem zastępczym, który zawiera. Pierwszy element tablicy zawiera dowolne znaki do momentu pierwszej zmiennej, drugi element zawiera znaki między pierwszym a drugim elementem itd. Każdy symbol zastępczy jest przekazywany do funkcji tagu jako samodzielna wartość z powiązaną zmienną.

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."

Sprawdź swoją wiedzę