TypeScript - wielowierszowy string

W tym artykule przyjrzymy się, jak utworzyć wielowierszowe stringi w języku TypeScript. Mówiąc o wielowierszowości mamy tutaj na myśli zmienne tekstowe, które chciali byśmy porozbijać na wiele wierszy, aby były czytelniejsze dla programisty pracującego z kodem.

Można to zrobić na kilka sposobów:

• template literals / template strings - wprowadzone w ECMAScript 2015 (ES6).
• sumowanie stringów,
• ukośnik wsteczny na końcu wiersza / backslash - ten sposób podejścia nie jest częścią standardu ECMAScript.

1. Przykład template literals

Ten sposób podejścia został wprowadzony w ES6 i jest on obsługiwany również przez TypeScript.

Główną wadą tego podejścia są przedrostki w postaci spacji lub innych białych znaków jeśli nowa linia nie zaczyna się od początku dla każdego wiersza - problem gdy chcemy ładnie sformatować kod. W poniższym przykładzie każdy wiersz zmiennej text zaczyna się od początku wiersza. Może to wyglądać brzydko w programie lecz dzieki temu problem nie wystąpi.

let text = `Line 1;
Line 2;
Line 3;
Line 4;
Line 5;`;

console.log(text);

Wynik:

Line 1;
Line 2;
Line 3;
Line 4;
Line 5;

2. Przykład sumowanie string-ów

To podejście rozwiązuje problem przedrostków powyższego przykładu, ale wprowadza pewne komplikacje związane z obowiązkiem dodawania na początku i końcu każdej lini apostrofów i znaku sumy.

let text = 'Line 1;' +
    'Line 2;' +
    'Line 3;' +
    'Line 4;' +
    'Line 5;';

console.log(text);

Wynik:

Line 1;Line 2;Line 3;Line 4;Line 5;

3. Przykład ukośnika wstecznego na końcu - backshash do przełamania lini

Takie podejście jest bardzo podobne do template literals, wadą jest to że trzeba pamiętać o dodawaniu znaku \ na końcu każdej linii.

Uwaga: ta funkcja nie jest częścią standardu ECMAScript, więc kiedy kod źródłowy jest transpilowany, powinniśmy być pewni, że \ zostanie zastąpiony z wspieranym rozwiązaniem w przeglądarkach.

let text = 'Line 1;\
Line 2;\
Line 3;\
Line 4;\
Line 5;';

console.log(text);

Wynik:

Line 1;Line 2;Line 3;Line 4;Line 5;

4. Array.join przykład metody:

To podejście jest bardziej jak trik (ang. trick), aby osiągnąć efekt wieloliniowy.

Uwaga: wadą tego podejścia jest to, że nasz tekst będzie transformowany do wersji czytelnej podczas wykynywania programu a nie na etapie parsowania czy transpilacji.

let array: Array<string> = [
    'This',
    'is',
    'multiline',
    'text.'
];

console.log(array.join('\n'));

Wynik:

This
is
multiline
text.

Bibliografia

1. Template literals - MDN
2. Ukośnik - Wikipedia