String

Об'єкт String (рядок) використовується для представлення та обробки послідовностей символів.

Опис

Рядки корисні для зберігання тих даних, які можна представити в текстовій формі. Серед найуживаніших операцій з рядками: визначення їхньої довжини, збирання і зчеплення їх докупи за допомогою рядкових операторів + та +=, перевірку наявності чи знаходження позиції підрядка за допомогою методу indexOf() та витягання певних підрядків за допомогою методу substring().

Створення рядків

Рядки можна створювати як примітиви, використовуючи рядкові літерали; або ж як об'єкти – за допомогою конструктора String():

const string1 = "Рядковий примітив";
const string2 = 'Також рядковий примітив';
const string3 = `І ще один рядковий примітив`;

const string4 = new String("Об'єкт String");

Рядкові примітиви та об'єкти-рядки поділяють значну частину своєї поведінки, але мають певні важливі відмінності та каверзи. Дивіться розділ "Рядки-примітиви та рядки-об'єкти" нижче.

Рядкові літерали позначаються одинарними або подвійними лапками — які в середовищі JavaScript опрацьовуються ідентично — або ж через символ «гравіс» `. Останній позначає так званий шаблонний літерал — форму рядкового літерала, яка дає змогу вставляти вирази в рядок (інтерполяція). Більше інформації про запис рядкових літералів – у лексичній граматиці.

Звертання до окремих символів

Є два способи звернутися до окремого символу рядка. Перший — це метод charAt():

"cat".charAt(1); // дає значення "a"

Інший спосіб – розглянути рядок як масивоподібний об'єкт, де кожний символ відповідає певному числовому індексу:

"cat"[1]; // дає значення "a"

Спроба видалити символ або присвоїти йому значення під час звертання до символу за допомогою квадратних дужок – не спрацює. Властивості рядка, до яких в цьому випадку отримує доступ програма, не доступні ні для запису, ні для налаштування. (Докладніше про це на сторінці Object.defineProperty().)

Порівняння рядків

Для порівняння рядків слід використовувати оператори більше та менше:

const a = "a";
const b = "b";
if (a < b) {
  // true
  console.log(`${a} менше за ${b}`);
} else if (a > b) {
  console.log(`${a} більше за ${b}`);
} else {
  console.log(`${a} та ${b} – рівні.`);
}

Зверніть увагу, що всі оператори порівняння, включно з === і ==, порівнюють рядки з урахуванням регістру. Загальноприйнятний спосіб порівнювати рядки без урахування регістру – переводити обидва, перед їх порівнянням, до одного регістру (вищого чи нижчого).

function areEqualCaseInsensitive(str1, str2) {
  return str1.toUpperCase() === str2.toUpperCase();
}

Вибір того, чи перетворювати з toUpperCase(), чи з toLowerCase(), є здебільшого довільним, і жоден з двох варіантів не має цілковитої надійності поза межами латинського алфавіту. Наприклад, і німецьку літеру ß, і літери ss toUpperCase() перетворює на SS, тим часом турецька літера ı може помилково бути заявлена toLowerCase() як нерівна I, якщо явно не використати toLocaleLowerCase("tr").

const areEqualInUpperCase = (str1, str2) =>
  str1.toUpperCase() === str2.toUpperCase();
const areEqualInLowerCase = (str1, str2) =>
  str1.toLowerCase() === str2.toLowerCase();

areEqualInUpperCase("ß", "ss"); // true; повинно бути false
areEqualInLowerCase("ı", "I"); // false; повинно бути true

Надійне рішення з урахуванням локалі для перевірки нечутливої до регістру рівності – застосовувати API Intl.Collator чи метод рядка localeCompare(), – вони поділяють однаковий інтерфейс, – зі значенням опції sensitivity "accent" чи "base".

const areEqual = (str1, str2, locale = "en-US") =>
  str1.localeCompare(str2, locale, { sensitivity: "accent" }) === 0;

areEqual("ß", "ss", "de"); // false
areEqual("ı", "I", "tr"); // true

Метод localeCompare() дає змогу порівнювати рядки у подібний до strcmp() спосіб: дає змогу сортувати рядки з урахуванням локалі.

Рядки-примітиви та об'єкти String

Зауважте, що JavaScript розрізняє об'єкти String та примітивні рядкові значення. (Це стосується також булевих значень і чисел.)

Рядкові літерали (виділені одинарними або подвійними лапками), а також рядки, повернуті з викликів String без контексту конструктора (тобто викликів, виконаних без ключового слова new), є рядками-примітивами. Коли відбувається спроба викликати метод чи звернутися до властивості примітивного рядка, JavaScript автоматично обгортає примітив у виклик конструктора, і вже потім – на об'єкті-обгортці звертається до методу чи властивості.

const strPrim = "foo"; // Літерал є примітивом рядка
const strPrim2 = String(1); // Приведено до рядкового примітива "1"
const strPrim3 = String(true); // Приведено до рядкового примітива "true"
const strObj = new String(strPrim); // String із new повертає обгортковий об'єкт рядка

console.log(typeof strPrim); // "string"
console.log(typeof strPrim2); // "string"
console.log(typeof strPrim3); // "string"
console.log(typeof strObj); // "object"

[!WARNING] Використання String як конструктора повинно траплятися рідко.

Рядкові примітиви та об'єкти типу String також видають різні результати під час використання eval(). Примітиви, передані до eval, вважаються вихідним кодом; натомість об'єкти String опрацьовуються як всі інші об'єкти, із поверненням об'єкта в результаті. Наприклад:

const s1 = "2 + 2"; // створює рядковий примітив
const s2 = new String("2 + 2"); // створює об'єкт String
console.log(eval(s1)); // повертає число 4
console.log(eval(s2)); // повертає рядок "2 + 2"

Таким чином, код може ламатись в місцях, де очікується примітивний рядок, але натомість приходить об'єкт String. Хоча у більшості випадків про цю різницю хвилюватись не варто.

Об'єкт String можна завжди перетворити на його примітивний відповідник, скориставшись методом valueOf().

console.log(eval(s2.valueOf())); // повертає число 4

Зведення до рядка

Чимало вбудованих операцій, котрі очікують на рядки, спершу зводять свої аргументи до типу рядка (здебільшого саме через це об'єкти String поводяться подібно до рядкових примітивів). Ця операція може бути описана наступним чином:

• Рядки повертаються як є.
• undefined перетворюється на "undefined".
• null перетворюється на "null".
• true перетворюється на "true"; false перетворюється на "false".
• Числа перетворюються за тим само алгоритмом, що використовується в toString(10).
• Значення BigInt перетворюються за тим само алгоритмом, що використовується в toString(10).
• Символи викидають TypeError.
• Об'єкти спершу перетворюються на примітиви шляхом виклику їх методів [Symbol.toPrimitive]() (зі "string" як підказкою), toString() чи valueOf() – у такому порядку пріоритету. Після цього результівний примітив перетворюється на рядок.

Є декілька способів досягнути в JavaScript майже такого самого ефекту.

• Шаблонний літерал: `${x}` виконує точно такі ж самі кроки приведення, як описані вище, для вбудованого в себе виразу.
• Функція String(): String(x) застосовує для перетворення x такий само алгоритм, окрім того, що символи не викидають TypeError, а повертають "Symbol(description)", де description – опис відповідного символу.
• Застосування оператора +: "" + x зводить свій операнд до примітива, а не просто рядка, і для певних об'єктів має геть інакшу логіку, ніж звичайне приведення до рядка. Дивіться подробиці на його сторінці довідки.

Залежно від конкретної ситуації може мати зміст використання `${x}` (аби зімітувати логіку вбудовування) чи String(x) (для обробки символів без викидання помилок), однак не слід застосовувати "" + x.

Символи UTF-16, кодові точки Unicode та графемні кластери

Рядки у своїй основі представлені як послідовності кодових точок UTF-16. У кодуванні UTF-16 кожна кодова точка – рівно 16 бітів завдовжки. Це означає, що є щонайбільше 2¹⁶, тобто 65536, можливих символів, котрі можна представити у вигляді кодової точки UTF-16. Цей набір символів зветься багатомовною площиною 0 (або БМП) і містить більшість поширених символів типу латинської, грецької, кириличної абеток, а також чимало східноазійських символів. Кожна кодова точка може бути записана як рядок, де на початку стоїть \u, а далі – рівно чотири шістнадцяткові цифри.

Проте увесь набір символів Unicode є набагато, набагато більшим за 65536. Додаткові символи зберігаються в UTF-16 як сурогатні пари, котрі є парами 16-бітових кодових одиниць, кожна з яких представляє єдиний символ. Для уникнення неоднозначності дві частини пари мусять лежати між 0xD800 та 0xDFFF, і ці кодові одиниці не використовуються для кодування символів з однієї кодової одиниці. (Якщо точніше, то початкові сурогати, котрі також звуться високосурогатними кодовими одиницями, мають значення від 0xD800 до 0xDBFF включно, а кінцеві, також відомі як низькосурогатні кодові одиниці, – від 0xDC00 до 0xDFFF включно.) Кожен символ Unicode, що складається з однієї чи двох кодових одиниць UTF-16, також зветься кодовою точкою Unicode. Кожна кодова точка Unicode може бути записана в рядок як \u{xxxxxx}, де xxxxxx – від однієї до 6 шістнадцяткових цифр.

"Самотній сурогат" – це 16-бітова кодова одиниця, яка відповідає одному з описів нижче:

• Перебуває в діапазоні 0xD800-0xDBFF включно (тобто є початковим сурогатом), але також є останньою кодовою одиницею в рядку, або наступна кодова одиниця не є кінцевим сурогатом.
• Перебуває в діапазоні 0xDC00-0xDFFF включно (тобто є кінцевим сурогатом), але є першою кодовою одиницею в рядку, або попередня кодова одиниця не є початковим сурогатом.

Самотні сурогати не представляють жодних символів Unicode. Хоча більшість вбудованих методів JavaScript обробляє їх правильно, оскільки всі вони працюють на основі кодових одиниць UTF-16, самотні сурогати нерідко бувають недопустимими значеннями при взаємодії з іншими системами – наприклад, encodeURI() викидає на самотніх сурогатах URIError, оскільки кодування URI використовує кодування UTF-8, котре не має кодування для самотніх сурогатів. Рядки, що не містять жодних самотніх сурогатів, називаються добре сформованими рядками і є безпечними для використання з функціями, котрі не працюють з UTF-16 (такими як encodeURI() або TextEncoder). Перевірити, чи є рядок добре формованим, можна за допомогою методу isWellFormed(), а також можна вичистити самотні сурогати – за допомогою методу toWellFormed().

На додачу до символів Unicode, є певні послідовності символів Unicode, котрі повинні розглядатися як єдина видима одиниця, – вони відомі як графемні кластери. Найпоширеніший приклад – емоджі: чимало емоджі, котрі мають значний діапазон варіацій, насправді утворюються декількома емодзі, зазвичай сполученими символом <ZWJ> (U+200D).

Слід бути обережними з тим, по якому рівню символів відбувається ітерування. Наприклад, split("") розбиває рядок на кодові одиниці UTF-16 і розриває сурогатні пари. Рядкові індекси також вказують на індекси всіх кодових одиниць UTF-16. З іншого боку, Symbol.iterator() виконує обхід за кодовими точками Unicode. Обхід за графемними кластерами потребуватиме написання певного коду самотужки.

"😄".split(""); // ['\ud83d', '\ude04']; розриває на два самотні сурогати
// "Рука тильним боком, вказівний направо: темний тон шкіри"
[..."👉🏿"]; // ['👉', '🏿']
// розбиває на базовий емоджі "Рука тильним боком, вказівний направо" і
// емоджі "Темний тон шкіри"
// "Родина: Чоловік, Хлопчик"
[..."👨‍👦"]; // [ '👨', '‍', '👦' ]
// розбиває на емоджі "Чоловік" та емоджі "Хлопчик", сполучені з'єднувачем нульової ширини
// Прапор ООН
[..."🇺🇳"]; // [ '🇺', '🇳' ]
// розбиває на дві літери – "індикатори регіону": "U" та "N".
// Всі емоджі-прапори утворені сполученням двох літер – індикаторів регіону

Конструктор

String()

Створює об'єкти String. Коли викликається як функція, то повертає примітивні значення типу String.

Статичні методи

String.fromCharCode() (із коду символу)

Повертає рядок, створений з переданої послідовності значень Unicode.

String.fromCodePoint() (із кодової точки)

Повертає рядок, створений з переданої послідовності кодів.

String.raw() (необроблений)

Повертає новий рядок, створений з необробленого рядка, переданого аргументом.

Властивості примірників

Ці властивості означені на String.prototype і є спільними для всіх примірників String.

String.prototype.constructor

Функція-конструктор, що створила об'єкт-примірник. Для примірників String початковим значенням є конструктор String.

Ці властивості є власними властивостями кожного окремого примірника String.

length (довжина)

Відображає довжину рядка. Доступна лише для читання.

Методи примірників

String.prototype.at() (на (позиції))

Повертає символ (рівно одну кодову одиницю UTF-16) за вказаним індексом index. Приймає також від'ємні числа, які позначають позицію з кінця рядка.

String.prototype.charAt() (символ на (позиції))

Повертає символ (рівно одну кодову одиницю UTF-16) за вказаним індексом index.

String.prototype.charCodeAt() (код символу на (позиції))

Повертає число, яке є значенням кодової одиниці UTF-16 за вказаним індексом index.

String.prototype.codePointAt() (кодова точка на (позиції))

Повертає невід'ємне ціле число — значення кодової одиниці в кодуванні UTF-16, яка знаходиться за вказаною позицією pos.

String.prototype.concat() (зчепити)

Об'єднує передані два (або більше) рядки тексту, і повертає результат — новий рядок.

String.prototype.endsWith() (закінчується на)

Визначає, чи рядок завершується символами, вказаними в searchString.

String.prototype.includes() (включає)

Визначає, чи рядок, на якому викликається цей метод, містить переданий підрядок searchString.

String.prototype.indexOf() (індекс (підрядка))

Повертає індекс першого у поточному рядку входження searchValue, або -1, якщо жодного не знайдено.

String.prototype.isWellFormed() (чи є добре сформованим)

Повертає булеве значення, яке вказує, чи містить поточний рядок самотні сурогати.

String.prototype.lastIndexOf() (останній індекс (підрядка))

Повертає індекс останнього у поточному рядку входження searchValue, або -1, якщо жодного не знайдено.

String.prototype.localeCompare() (порівняти згідно з локаллю)

Повертає число, яке вказує, чи переданий рядок compareString під час сортування повинен стояти перед, після, або є еквівалентним до початкового рядка.

String.prototype.match() (зіставити)

Використовується для зіставлення рядка із регулярним виразом regexp.

String.prototype.matchAll() (зіставити повністю)

Повертає ітератор, що містить усі збіги з переданим регулярним виразом regexp.

String.prototype.normalize() (нормалізувати)

Повертає нормалізовану Unicode-форму рядка, на якому викликається метод.

String.prototype.padEnd() (заповнити кінець)

Заповнює поточний рядок з кінця переданим рядком, а тоді повертає новий рядок довжиною targetLength.

String.prototype.padStart() (заповнити початок)

Заповнює поточний рядок з початку переданим рядком, а тоді повертає новий рядок довжиною targetLength.

String.prototype.repeat() (повторювати)

Повертає рядок, що містить вміст початкового рядка, повторений count разів.

String.prototype.replace() (замінити)

Використовується для заміни підрядка, що збігається з searchFor, вмістом replaceWith. Аргумент searchFor може бути як рядком, так і регулярним виразом, а replaceWith може бути або рядком, або функцією.

String.prototype.replaceAll() (замінити усі (входження))

Використовується для заміни всіх підрядків, що збігаються з searchFor, вмістом replaceWith. Аргумент searchFor може бути як рядком, так і регулярним виразом, а replaceWith може бути або рядком, або функцією.

String.prototype.search() (шукати)

Шукає збіги з регулярним виразом regexp у рядку, на якому було викликано метод.

String.prototype.slice() (вирізати скибку, зріз)

Видобуває частину рядка і повертає її як новий рядок.

String.prototype.split() (розділити на частини)

Повертає масив рядків, отриманих розділенням початкового рядка в усіх точках входження підрядка sep.

String.prototype.startsWith() (починається (підрядком))

Визначає, чи рядок, на якому було викликано метод, починається послідовністю символів searchString.

String.prototype.substr() (підрядок)

Повертає підрядок, починаючи з вказаного індексу, і продовжуючи вказану кількість символів.

String.prototype.substring() (підрядок)

Повертає новий рядок, що містить символи початкового рядка, взятих починаючи з вказаного індексу (або з-поміж індексів, якщо було вказано обидва).

String.prototype.toLocaleLowerCase() (до нижнього регістру згідно з локаллю)

Повертає символи з початкового рядка, переведені в нижній регістр з урахуванням поточної активної локалі.

Для більшості мов результат виконання цієї функції буде ідентичним до toLowerCase().

String.prototype.toLocaleUpperCase() (до верхнього регістру згідно з локаллю)

Повертає символи з початкового рядка, переведені в верхній регістр з урахуванням поточної активної локалі.

Для більшості мов результат виконання цієї функції буде ідентичним до toUpperCase().

String.prototype.toLowerCase() (до нижнього регістру)

Повертає значення рядка, на якому було викликано метод, переведене у нижній регістр.

String.prototype.toString() (до рядка)

Повертає рядок — відповідник до вказаного об'єкта. Заміщує метод Object.prototype.toString().

String.prototype.toUpperCase() (до верхнього регістру)

Повертає значення рядка, на якому було викликано метод, переведене у верхній регістр.

String.prototype.toWellFormed() (до добре сформованого)

Повертає рядок, де всі самотні сурогати замінені на символ-замінник Unicode U+FFFD.

String.prototype.trim() (підрізати)

Обрізає пробільні символи на початку та в кінці рядка.

String.prototype.trimEnd() (підрізати кінець)

Обрізає пробільні символи в кінці рядка.

String.prototype.trimStart() (підрізати початок)

Обрізає пробільні символи на початку рядка.

String.prototype.valueOf() (значення (об'єкта))

Повертає примітив — значення вказаного об'єкта. Заміщує метод Object.prototype.valueOf().

String.prototype[Symbol.iterator]()

Повертає новий об'єкт-ітератор, який перебирає всі кодові точки значення String, повертаючи кожну з них як окреме значення String.

Методи для обгортання в HTML

[!WARNING] Нерекомендовані. Уникайте вживання цих методів.

Вони мають обмежене застосування, оскільки засновані на дуже старому стандарті HTML і надають лише підмножину наразі доступних тегів та атрибутів HTML. Чимало з них нині створює нерекомендовану чи нестандартну розмітку. На додачу до цього, ці методи виконують склеювання рядків, без жодних валідації й очищення, що робить їх потенційною загрозою безпеці, коли безпосередньо вставляти їх результат за допомогою innerHTML. Натомість слід використовувати DOM API, як то document.createElement().

String.prototype.anchor() (якір)

<a name="name"> (ціль для гіперпосилань)

String.prototype.big() (великий)

<big>

String.prototype.blink() (блимання)

<blink>

String.prototype.bold() (грубий)

<b>

String.prototype.fixed() (фіксований)

<tt>

String.prototype.fontcolor() (колір шрифту)

<font color="color">

String.prototype.fontsize() (розмір шрифту)

<font size="size">

String.prototype.italics() (курсив)

<i>

String.prototype.link() (посилання)

<a href="url"> (посилання на URL)

String.prototype.small() (дрібний)

<small>

String.prototype.strike() (викреслений)

<strike>

String.prototype.sub() (підрядковий)

<sub>

String.prototype.sup() (надрядковий)

<sup>

Зверніть увагу, що ці методи не перевіряють, чи містить сам рядок теги HTML, тож можливо створити недійсний HTML:

"</b>".bold(); // <b></b></b>

Єдине екранування, котре вони виконують – заміна " в значеннях атрибутів на " (це стосується anchor(), fontcolor(), fontsize() і link())

"foo".anchor('"Hello"'); // <a name="&quot;Hello&quot;">foo</a>

Приклади

Перетворення рядків

Функція String() – це надійніший спосіб перетворення значень на рядки, ніж виклик метода toString() на цільовому значенні, адже перший варіант працює щодо null і undefined. Наприклад:

// Звернутися до властивостей на null або undefined не вийде

const nullVar = null;
nullVar.toString(); // TypeError: Cannot read properties of null
String(nullVar); // "null"

const undefinedVar = undefined;
undefinedVar.toString(); // TypeError: Cannot read properties of undefined
String(undefinedVar); // "undefined"

Специфікації

Сумісність із браузерами

Дивіться також

• Посібник Форматування тексту
• RegExp