Рядки

Рядок - це індексований набір символів (від нуля або більше символів), взятих в одинарні або подвійні лапки.

const someString = "random string";

Індексація елементів рядка починається з нуля. Наприклад, в рядку "JavaScript" літера "J" стоїть на позиції з індексом 0, а "t" - під індексом 9.

У рядку неможливо змінити тільки один символ. Рядок можна створити новий змінений і перезаписати весь повністю

Конкатенація рядків​

У операціях з рядками оператор + здійснює обʼєднання рядків. Цю операцію називають конкатенація, або додавання рядків.

При операції конкатенації відбувається приведення даних до рядка, а потім їх "склеювання" (або зшиття) у зазначеному порядку.

const someString = "I " + "feel" + " good";
console.log(someString); // I feel good

Утім важливо зважати на порядок операндів, бо від цього залежить до чого вони будуть приведені (числа чи рядка). Скажімо, якщо перших два операнди можна привести до числа, то спочатку відбудеться математична операція додавання, а потім вже конкатенація.

console.log(1 + "2"); // "12"
console.log(1 + "2" + 4); // "124"
console.log(1 + 2 + "4"); // "34"

В останньому прикладі відбулася математична операція додавання для перших двох чисел 1 і 2, після чого число 3 було перетворено у рядок "3" і зшито з рядком "4".

Шаблонні рядки​

Шаблонні рядки - це альтернатива конкатенації зі зручнішим синтаксисом. Шаблонний рядок беруть у зворотні `` (косі) лапки, замість подвійних або одинарних. Можна підставляти у шаблонний рядок значення змінної передавши її в фігурних дужках після символу долара ${вираз}. Це спрощує код, бо прибираються зайві лапки та оператори додавання.

Розглянемо далі однакову задачу виконану конкатенацією і шаблонним рядком.

// Конкатенація рядків
const guestName = "Манго";
const roomNumber = 207;
const greeting =
  "Welcome " + guestName + ", your room number is " + roomNumber + "!";
console.log(greeting); // "Welcome Mango, your room number is 207!"

// Шаблонний рядок
const guestName = "Манго";
const roomNumber = 207;
const greeting = `Welcome ${guestName}, your room number is ${roomNumber}!`;
console.log(greeting); // "Welcome Mango, your room number is 207!"

Косі лапки на клавіатурі розміщені у верхній лівій частині клавіатури. Зліва від клавіши "1", знизу від "esc" і над клавішею "tab".

Властивості та методи рядків​

У кожного рядка є вбудовані властивості та методи.

Властивість length​

Щоб дізнатися довжину рядка (тобто кількість його символів) використовують вбудовану властивість length. Значення довжини отримують звернувшися до властивості через крапку після назви змінної в які міститься рядок.

const message = "Hello world!";
console.log(message.length); // 12
console.log("The sun is shining brightly!".length); // 28

Методи toLowerCase() і toUpperCase()​

Методи рядка toLowerCase() і toUpperCase() повертають новий рядок відповідно у нижньому і верхньому регістрі, не змінюючи оригінальний рядок.

const message = "Hello world!";
console.log(message.toLowerCase()); // "hello world!"
console.log(message.toUpperCase()); // "HELLO WORLD!"
console.log(message); // "Hello world!"

Усі методи рядків чутливі до регістру.

Великі та маленькі символи мають різний машинний код. Тобто рядки де хоч один символ відрізняється за регістрами не будуть рівними.

console.log("Hello" === "hello"); // false
console.log("HeLLo" === "HELLO"); // false

На практиці часто виникає задача, коли потрібно робити пошук рядка в масиві або обʼєкті, і тільки різниця в регістрі одного символу вже не покаже збігу, хоча по смислу це саме те, що треба.

Для розв'язання цієї задачі два порівнювані рядки приводять до однакового регістру і після цього порівнюють. Це називають "нормалізацією".

Скажімо в базі даних у нас зберігається змінна зі значенням "GOOGLE", а користувач у полі форми пошуку ввів запит "gOogLe". Тоді нормалізація і порівняння на збіг рядків з ігноруванням регістру виглядатиме так.

const COMPANY = "GOOGLE";
const userInput = "gOogLe";
const normalizedToUpperCaseUserInput = userInput.toUpperCase();

console.log(userInput); // 'gOogLe'
console.log(userInput === COMPANY); // false
console.log(normalizedToUpperCaseUserInput); // 'GOOGLE'
console.log(normalizedToUpperCaseUserInput === COMPANY); // true

Метод indexOf()​

Метод indexOf() повертає позицію (індекс), на якій знаходить перший збіг підрядка або -1, якщо нічого не знайдено.

const message = "I feel good";
console.log(message.indexOf("fee")); // 3
console.log(message.indexOf("hello")); // -1

Метод includes()​

Метод includes() перевіряє, чи міститься підрядок в рядку, повертає буль - true, якщо міститься, і false - коли не міститься. Регістр символів в рядку і підрядку має значення, оскільки, як було зазначено раніше, наприклад, літера "a" не дорівнює літері "А" тощо.

const someString = "Hello world!";

console.log(someString.includes("h")); // false
console.log(someString.includes("H")); // true
console.log(someString.includes("world")); // true
console.log(someString.includes("World")); // false
console.log(someString.includes("o w")); // true
console.log(someString.includes("O W")); // false

Метод endsWith()​

Метод endsWith() перевіряє чи завершується рядок символами (підрядком), зазначеними в дужках. Повертає true або false.

const jsFileName = "script.js";
console.log(jsFileName.endsWith(".js")); // true

const cssFileName = "styles.css";
console.log(cssFileName.endsWith(".js")); // false

Методи replace() і replaceAll()​

Метод replace() повертає новий рядок, в якому перший збіг із підрядком замінюється на нове значення.

Метод replaceAll() повертає новий рядок, в якому всі збіги із підрядком замінюються на нове значення.

const jsFileName = "script.js";
const minifiedJsFileName = jsFileName.replace(".js", ".min.js");
console.log(minifiedJsFileName); // "script.min.js"

const cssFileNames = "styles.css, about.css, portfolio.css";
const minifiedCssFileNames = cssFileNames.replaceAll(".css", ".min.css");
console.log(minifiedCssFileNames); // "styles.min.css, about.min.css, portfolio.min.css"

Метод slice()​

Метод рядків slice (startIndex, endIndex) використовують для створення копії частини або всього рядка. Він робить копію елементів рядка від startIndex і до endIndex, але не включно. Метод повертає новий рядок, не змінюючи оригінал.

const someString = "Hello world!";
console.log(someString.slice(0, 3)); // "Hel"
console.log(someString.slice(4, 8)); // "o wo"
console.log(someString.slice(0, someString.length)); // "Hello world!"
console.log(someString.slice(6, someString.length)); // "world!"