Languages
[Edit]
PL

TypeScript - wielowierszowy string

3 points
Created by:
Sylwia
1337

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
Hey ­čĹő
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.