Szczegóły

Jeśli kiedykolwiek korzystaliście z narzędzi takich jak Mustache lub Handlebars, zapewne z bananem na twarzy przyjmiecie wiadomość, że ES6 umożliwia używanie wyrażeń wewnątrz stringów. To tylko jedna z kilku nowych możliwości stringów wprowadzonych w ECMAScript 6. 

Interpolacja stringów

W JavaScript umieszczanie wartości zmiennych wewnątrz stringów nie jest zbyt wygodne. Zmusza do pilnowania cudzysłowów, plusików, spacji, znaków końca linii i kilku innych rzeczy. Powstały nawet całe biblioteki, których główną funkcjonalnością jest uproszczenie tego procederu. Na szczęście ECMAScript 6 rozwiązuje ten problem w bardzo prosty sposób. Weźmy przykładowy kod w ES5:

let a = 2;
let b = 3;
console.log("Dwa plus trzy to " + (a + b) + "."); //Dwa plus trzy to 5.

Identyczny rezultat osiągniemy w ES6 następującym kodem:

let a = 2;
let b = 3;
console.log(`Dwa plus trzy to ${a + b}.`); //Dwa plus trzy to 5.

Za całą magię w powyższym przykładzie odpowiadają znaki ` . Objęcie nimi stringa pozwala na umieszczenie w nim dowolnego wyrażenia. Wyrażenie wystarczy objąć w nawiasy klamrowe {} i poprzedzić znakiem $. Jest to tzw. interpolacja, znana z języków takich jak Pearl czy Python. Inny przykład wykorzystania interpolacji:

let circle = { radius: 5, name: "A" };
let message = `Pole koła ${circle.name} to ${Math.pow(circle.radius, 2) * Math.PI}.`;
console.log(message); //Pole koła A to 78.53981633974483.

Stringi wielowierszowe (multiline)

Interpolacja to nie jedyna możliwość jaką daje obejmowanie stringów znakami ` zamiast ' czy ". Kolejnym udogodnieniem jest możliwość prostego zapisu stringa w wielu wierszach. Żeby to zobrazować rozwiniemy pierwszy przykład w ES5:

let a = 2;
let b = 3;
console.log("Dwa plus trzy to " + (a + b) + ",\ndwa razy trzy to " + a * b + ".");

Kod ten poskutkuje wypisanie w konsoli następujących dwóch linijek:

Dwa plus trzy to 5,
dwa razy trzy to 6.

W ES6, korzystając ze znaków ` możemy osiągnąć to samo, a przy okazji skrócić kod i zwiększyć jego czytleność:

let a = 2;
let b = 3;
console.log(`Dwa plus trzy to ${a + b},
dwa razy trzy to ${a * b}.`);

Metody stringowe

ECMAScript 6 wprowadza także wiele gotowych metod do obsługi stringów. Wartych odnotowania jest szczególnie kilka z nich:

  • String.prototype.startsWith
  • String.prototype.endsWith
  • String.prototype.includes
  • String.prototype.repeat

Omówmy je pokrótce:

String.prototype.startsWith

Sprawdza, czy string rozpoczyna się od znaków z innego stringa zwracając odpowiednio true lub false. Może też przyjąć drugi parametr określający od którego znaku ma zacząć sprawdzanie. Przykład:

let str = 'Śpieszmy się uczyć ES6, tak szybko nadchodzi.';

console.log(str.startsWith('Ś'));             // true
console.log(str.startsWith('Śpieszmy się ')); // true
console.log(str.startsWith('ES6'));           // false
console.log(str.startsWith('ES6', 19));       // true

String.prototype.endsWith

Jak można się domyślić, działa to analogicznie do powyższego. Sprawdza, czy string kończy się znakami z innego stringa zwracając odpowiednio true lub false. Może też przyjąć drugi parametr sprawiający, że wyszukujemy w stringu, jakim ten by się stał, gdyby został ograniczony do tylu znaków ile podaje parametr. Przykład:

let str = 'Żenujące parafrazy klasyków zawsze w cenie.';

console.log(str.endsWith('nie.'));          // true
console.log(str.endsWith(' cenie.'));       // true
console.log(str.endsWith('Żenujące'));      // false
console.log(str.endsWith('klasyków', 27));  // true

String.prototype.includes

Sprawdza, czy string zawiera w sobie innego stringa zwracając odpowiednio true lub false. Może też przyjąć drugi parametr określający od którego znaku ma zacząć sprawdzanie. Przykład:

let str = 'Od długiego siedzenia przed kompem mózg się lasuje.';

console.log(str.includes('długiego')); // true
console.log(str.includes(' '));        // true
console.log(str.includes('musk'));     // false
console.log(str.includes('Od', 10));   // false

String.prototype.repeat

Zwraca string zbudowany z tego samego stringa powtórzonego zadaną ilosć razy. Przykład:

let str = 'abcd';

str.repeat(-1);   // RangeError
str.repeat(0);    // ''
str.repeat(1);    // 'abcd'
str.repeat(2);    // 'abcdabcd'
str.repeat(3.5);  // 'abcdabcdabcd' (konwertuje parametr na integer)