Template literals i metody stringów

W laboratorium Parku Jurajskiego naukowcy muszą generować raporty, formatować dane genetyczne i przetwarzać nazwy gatunków. Template literals i metody stringów to narzędzia, które pozwalają na elegancką manipulację tekstem - od prostego wstawiania zmiennych po zaawansowane operacje na łańcuchach znaków.

Template literals - podstawy

Template literals to stringi otoczone znakiem backtick (`), które pozwalają na wstawianie wyrażeń JavaScript za pomocą składni ${...}:

1const species = 'T-Rex';
2const weight = 8000;
3
4// Stary sposób - konkatenacja
5const old = 'Gatunek: ' + species + ', waga: ' + weight + ' kg';
6
7// Template literal - znacznie czytelniej!
8const report = \`Gatunek: \${species}, waga: \${weight} kg\`;
9console.log(report); // "Gatunek: T-Rex, waga: 8000 kg"

Wyrażenia wewnątrz ${}

Wewnątrz ${} można umieścić dowolne wyrażenie JavaScript - nie tylko zmienne:

1const dino = { name: 'Rex', health: 85 };
2
3console.log(\`Status: \${dino.health > 50 ? 'stabilny' : 'krytyczny'}\`);
4// "Status: stabilny"
5
6console.log(\`Zdrowie: \${dino.health}%\`);
7// "Zdrowie: 85%"
8
9console.log(\`Podwójna dawka: \${dino.health * 2} jednostek\`);
10// "Podwójna dawka: 170 jednostek"

Wieloliniowe stringi

Template literals zachowują formatowanie wieloliniowe - nie trzeba używać \n:

1const dinoCard = \`
2╔════════════════════════╗
3║  Gatunek: T-Rex        ║
4║  Strefa: A             ║
5║  Status: Aktywny       ║
6╚════════════════════════╝
7\`;
8console.log(dinoCard);

Tagged templates

Tagged templates pozwalają przetwarzać template literal za pomocą funkcji. Funkcja "tagująca" otrzymuje tablicę statycznych fragmentów tekstu i wartości wyrażeń:

1function highlight(strings, ...values) {
2  let result = '';
3  strings.forEach((str, i) => {
4    result += str;
5    if (i < values.length) {
6      result += '**' + values[i] + '**';
7    }
8  });
9  return result;
10}
11
12const name = 'Rex';
13const zone = 'A';
14const tagged = highlight\`Dinozaur \${name} w strefie \${zone}\`;
15console.log(tagged);
16// "Dinozaur **Rex** w strefie **A**"

Metody stringów - wyszukiwanie

JavaScript oferuje wiele metod do pracy ze stringami. Zacznijmy od wyszukiwania:

1const dnaSequence = 'ATCG-TTGA-ACGT-TTGA';
2
3// indexOf() - zwraca indeks pierwszego wystąpienia (lub -1)
4console.log(dnaSequence.indexOf('TTGA'));    // 5
5console.log(dnaSequence.indexOf('XXXX'));    // -1
6
7// includes() - sprawdza czy string zawiera fragment (boolean)
8console.log(dnaSequence.includes('ACGT'));   // true
9console.log(dnaSequence.includes('ZZZZ'));   // false
10
11// startsWith() / endsWith() - sprawdza początek/koniec
12console.log(dnaSequence.startsWith('ATCG')); // true
13console.log(dnaSequence.endsWith('TTGA'));   // true

Metody stringów - wycinanie i dzielenie

1const specimen = 'Tyrannosaurus Rex';
2
3// slice(start, end) - wycina fragment stringa
4console.log(specimen.slice(0, 13));    // "Tyrannosaurus"
5console.log(specimen.slice(14));       // "Rex"
6console.log(specimen.slice(-3));       // "Rex" (od końca)
7
8// split() - dzieli string na tablicę
9const zones = 'A-B-C-D'.split('-');
10console.log(zones); // ['A', 'B', 'C', 'D']
11
12const words = 'Park Jurajski jest super'.split(' ');
13console.log(words); // ['Park', 'Jurajski', 'jest', 'super']

Metody stringów - transformacje

1const dinoName = '  velociraptor  ';
2
3// trim() - usuwa białe znaki z początku i końca
4console.log(dinoName.trim());      // "velociraptor"
5console.log(dinoName.trimStart()); // "velociraptor  "
6console.log(dinoName.trimEnd());   // "  velociraptor"
7
8// toUpperCase() / toLowerCase()
9console.log('rex'.toUpperCase());         // "REX"
10console.log('T-REX'.toLowerCase());       // "t-rex"
11
12// replace() - zamienia pierwsze wystąpienie
13const text = 'Zone A, Zone B, Zone A';
14console.log(text.replace('Zone', 'Strefa'));  // "Strefa A, Zone B, Zone A"
15
16// replaceAll() - zamienia wszystkie wystąpienia
17console.log(text.replaceAll('Zone', 'Strefa')); // "Strefa A, Strefa B, Strefa A"

Metody stringów - dopełnianie

Metody padStart() i padEnd() pozwalają dopełnić string do zadanej długości:

1// padStart(length, fillString) - dopełnia od początku
2const dinoId = '42';
3console.log(dinoId.padStart(5, '0'));  // "00042"
4console.log(dinoId.padStart(5, '-'));  // "---42"
5
6// padEnd(length, fillString) - dopełnia od końca
7const label = 'Rex';
8console.log(label.padEnd(10, '.'));    // "Rex......."
9
10// Praktyczny przykład - formatowanie tabeli
11const specimens = [
12  { id: '1', name: 'T-Rex' },
13  { id: '42', name: 'Velociraptor' },
14  { id: '100', name: 'Triceratops' }
15];
16
17specimens.forEach(s => {
18  const formattedId = s.id.padStart(4, '0');
19  const formattedName = s.name.padEnd(15, ' ');
20  console.log(\`ID: \${formattedId} | Gatunek: \${formattedName}\`);
21});
22// ID: 0001 | Gatunek: T-Rex
23// ID: 0042 | Gatunek: Velociraptor
24// ID: 0100 | Gatunek: Triceratops

Łączenie metod (chaining)

Metody stringów można łączyć w łańcuchy, bo każda z nich zwraca nowy string:

1const messy = '  park JURAJSKI  jest  SUPER  ';
2const clean = messy.trim().toLowerCase().replace(/\s+/g, ' ');
3console.log(clean); // "park jurajski jest super"
4
5const dinoCode = 'trex-001';
6const formatted = dinoCode.split('-')
7  .map(part => part.toUpperCase())
8  .join('-');
9console.log(formatted); // "TREX-001"

"Template literals i metody stringów to jak system etykietowania próbek DNA w naszym laboratorium" - mówi Dr. Rex. "Pozwalają formatować, przeszukiwać i przekształcać dane tekstowe z chirurgiczną precyzją!"