НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

JS Підручник

JS Старт JS Інтро JS Установка JS Виведення JS Інструкції JS Синтаксис JS Коментарі JS Змінні JS Ключове слово Let JS Ключове слово Const JS Оператори JS Арифметичні JS Присвоєння JS Типи даних JS Функції JS Об’єкти JS Події JS Рядки JS Рядкові методи JS Рядковий пошук JS Рядкові шаблони JS Числа JS Числові методи JS Масиви JS Методи масиву JS Сортування масиву JS Ітерація масиву JS Масив Const JS Дати JS Формати дат JS Методи отримання дат JS Методи установки дат JS Математичні JS Рандомні JS Булеві JS Порівняння JS Умови JS Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Break & Continue JS Ітерації JS Набори JS Карти JS Typeof JS Перетворення типів JS Побітове JS Регулярні вирази JS Помилки JS Область дії JS Хостинг JS Use Strict JS Ключове слово this JS Функція стрілки JS Класи JS JSON JS Відладка JS Гід по стилю JS Кращі практики JS Поширені помилки JS Продуктивність JS Зарезервовані слова

JS Версії

JS Версії JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS Історія

JS Об’єкти

Визначення об’єктів Властивості об’єкта Методи об’єкта Відображення об’єкта Доступ до об’єктів Конструктори об’єктів Прототипи об’єктів Ітеровані об’єкти Набори об’єктів Карти об’єктів Довідник об’єктів

JS Функції

Визначення функцій Параметри функції Звернення до функції Виклик функції Застосування функції Функція Bind Закриття функції

JS Класси

Вступ Наслідування класу Статичні методи

JS Асинхронний

Зворотні виклики Асинхронний Проміси Async/Await

JS HTML DOM

DOM Вступ DOM Методи DOM Документ DOM Елементи DOM HTML DOM Форми DOM CSS DOM Анімація DOM Події DOM Слухач подій DOM Навігація DOM Вузли DOM Колекції DOM Вузлові списки

JS Браузер BOM

JS Вікно JS Скрін JS Локація JS Історія JS Навігатор JS Спливаюче оповіщення JS Таймінг JS Кукі

JS Веб API

Веб API Вступ Веб-форми API Веб-історія API Веб-сховище API Веб-воркер API Веб-виборка API Веб-геолокація API

JS AJAX

AJAX Вступ AJAX XMLHttp AJAX Запит AJAX Відгук AJAX XML Файл AJAX PHP AJAX ASP AJAX База даних AJAX Додатки AJAX Приклади

JS JSON

JSON Вступ JSON Синтаксис JSON та XML JSON Типи даних JSON Аналіз JSON Stringify JSON Об’єкти JSON Масиви JSON Сервер JSON PHP JSON HTML JSON JSONP

JS та jQuery

jQuery Селектори jQuery HTML jQuery CSS jQuery DOM

JS Приклади

JS Приклади JS HTML DOM JS HTML Input JS HTML Об’єкти JS HTML Події JS Браузер JS Редактор JS Вправи JS Вікторина JS Сертифікат

JS Довідники

JavaScript Об’єкти HTML DOM Об’єкти

Place for your advertisement!
JavaScript. Уроки W3Schools для початківців українською мовою

En

JavaScript Рядкові методи


Рядкові методи допомагають працювати з рядками.


Рядкові методи та властивості

Примітивні значення, такі як "John Doe", не можуть мати властивостей або методів (оскільки вони не є об’єктами).

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


JavaScript Метод length

Властивість length повертає довжину рядка:

Приклад

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;
Спробуйте самі »

Вилучення частин рядка

Існує 3 методи вилучення частини рядка:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript Метод slice()

slice() витягує частину рядка та повертає витягнуту частину в новому рядку.

Метод приймає 2 параметри: початкову позицію та кінцеву позицію (кінець не включається).

Приклад

Відріжте частину рядка від позиції 7 до позиції 13 (13 не включається):

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);
Спробуйте самі »

Примітка

JavaScript підраховує позиції з нуля.

Перша позиція – 0.

Друга позиція – 1.

Якщо параметр від’ємний, позиція відраховується з кінця рядка.

Цей приклад вирізає частину рядка з позиції -12 до позиції -6:

Приклад

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);
Спробуйте самі »

Якщо ви опустите другий параметр, метод виділить решту рядка:

Приклад

let part = str.slice(7);
Спробуйте самі »

або, рахуючи з кінця:

Приклад

let part = str.slice(-12);
Спробуйте самі »

JavaScript Метод substring()

substring() схожий на slice().

Різниця полягає в тому, що початкові та кінцеві значення, менші за 0, розглядаються як 0 в substring().

Приклад

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);
Спробуйте самі »

Якщо ви опустите другий параметр, substring() виділить решту рядка.


JavaScript Метод substr()

substr() схожий на slice().

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

Приклад

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);
Спробуйте самі »

Якщо ви опустите другий параметр, substr() виділить решту рядка.

Приклад

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);
Спробуйте самі »

Якщо перший параметр від’ємний, позиція відраховується з кінця рядка.

Приклад

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);
Спробуйте самі »

Заміна вмісту рядка

Метод replace() замінює вказане значення іншим значенням у рядку:

Приклад

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
Спробуйте самі »

Примітка

Метод replace() не змінює рядок, який він викликає.

Метод replace() повертає новий рядок.

Метод replace() замінює лише перший збіг.

Якщо ви хочете замінити всі збіги, використовуйте регулярний вираз зі встановленим прапорцем /g. Дивіться приклади нижче.

За умовчанням метод replace() замінює лише перший збіг:

Приклад

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
Спробуйте самі »

За замовчуванням метод replace() чутливий до регістру. Написання MICROSOFT (у верхньому регістрі) не працюватиме:

Приклад

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");
Спробуйте самі »

Щоб замінити нечутливий до регістру, використовуйте регулярний вираз із прапорцем /i (нечутливий):

Приклад

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");
Спробуйте самі »

Примітка

Регулярні вирази записуються без лапок.

Щоб замінити всі збіги, використовуйте регулярний вираз із прапорцем /g (глобальний збіг):

Приклад

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");
Спробуйте самі »

Примітка

Ви дізнаєтеся більше про регулярні вирази в розділі JavaScript Регулярні вирази на нашому сайті W3Schools українською.


Перетворення у верхній і нижній регістри

Рядок перетворюється на верхній регістр за допомогою toUpperCase():

Рядок перетворюється на нижній регістр за допомогою toLowerCase():


JavaScript Метод toUpperCase()

Приклад

let text1 = "Hello World!";
let text2 = text1.toUpperCase();
Спробуйте самі »

JavaScript Метод toLowerCase()

Приклад

let text1 = "Hello World!";       // Рядок
let text2 = text1.toLowerCase();  // text2 це text1, перетворений на нижній регістр
Спробуйте самі »

JavaScript Метод concat()

concat() з’єднує два або більше рядків (конкатенація):

Приклад

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
Спробуйте самі »

Метод concat() можна використовувати замість оператора "плюс". Ці два рядки роблять те саме:

Приклад

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

Примітка

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

Офіційно сказано:

Рядки незмінні: рядки не можна змінювати, лише замінювати.


JavaScript Метод trim()

Метод trim() видаляє пробіли з обох сторін рядка:

Приклад

let text1 = "      Hello World!      ";
let text2 = text1.trim();
Спробуйте самі »

JavaScript Відступ рядка (padding)

ECMAScript 2017 додав два методи рядка: padStart() і padEnd() для підтримки відступів на початку та в кінець рядка.


JavaScript Метод padStart()

Метод padStart() доповнює рядок іншим рядком:

Приклад

let text = "5";
let padded = text.padStart(4,"x");
Спробуйте самі »

Приклад

let text = "5";
let padded = text.padStart(4,"0");
Спробуйте самі »

Примітка

Метод padStart() є методом рядка.

Щоб додати число, спочатку треба перетворити число на рядок.

Див. приклад нижче.

Приклад

let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");
Спробуйте самі »

Підтримка браузерами

padStart() є функцією ECMAScript 2017.

Він підтримується всіма сучасними браузерами:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart() не підтримується в Internet Explorer.


JavaScript Метод padEnd()

Метод padEnd() доповнює рядок іншим рядком:

Приклад

let text = "5";
let padded = text.padEnd(4,"x");
Спробуйте самі »

Приклад

let text = "5";
let padded = text.padEnd(4,"0");
Спробуйте самі »

Примітка

Метод padEnd() є методом рядка.

Щоб додати число, спочатку треба перетворити число на рядок.

Див. приклад нижче.

Приклад

let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");
Спробуйте самі »

Підтримка браузерами

padEnd() є функцією ECMAScript 2017.

Він підтримується всіма сучасними браузерами:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd() не підтримується в Internet Explorer.


Вилучення символів рядка

Існує 3 методи вилучення символів рядка:

  • charAt(position)
  • charCodeAt(position)
  • Властивість access [ ]

JavaScript Метод charAt()

Метод charAt() повертає символ за вказаним індексом (позицією) у рядку:

Приклад

let text = "HELLO WORLD";
let char = text.charAt(0);
Спробуйте самі »

JavaScript Метод charCodeAt()

Метод charCodeAt() повертає Юнікод символу за вказаним індексом у рядку:

Метод повертає код UTF-16 (ціле число від 0 до 65535).

Приклад

let text = "HELLO WORLD";
let char = text.charCodeAt(0);
Спробуйте самі »

Властивість Access

ECMAScript 5 (2009) дозволяє доступ до властивості [ ] для рядків:

Приклад

let text = "HELLO WORLD";
let char = text[0];
Спробуйте самі »

Примітка

Властивість access може бути дещо непередбачуваною:

  • Це робить рядки схожими на масиви (але ними не є)
  • Якщо символ не знайдено, [ ] повертає undefined, тоді як charAt() повертає порожній рядок.
  • Лише для читання. str[0] = "A" не дає помилок (але не працює!)

Приклад

let text = "HELLO WORLD";
text[0] = "A";    // Не дає помилок, але не працює
Спробуйте самі »

Перетворення рядка в масив

Якщо ви хочете працювати з рядком як масивом, ви можете перетворити його на масив.

JavaScript Метод split()

Рядок можна перетворити на масив за допомогою методу split():

Приклад

text.split(",")    // Розділити комами
text.split(" ")    // Розділити пробілами
text.split("|")    // Розділити трубами (вертикальними рисками)
Спробуйте самі »

Якщо роздільник опущено, повернутий масив міститиме весь рядок в індексі [0].

Якщо роздільником є "", повернутий масив буде масивом із окремих символів:

Приклад

text.split("")
Спробуйте самі »

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

Щоб отримати повну довідкову інформацію про рядки, перейдіть до нашого:

Повний довідник JavaScript рядків.

Довідник містить описи та приклади всіх властивостей і методів рядків.

Перевірте себе за допомогою вправ

Вправа:

Перетворіть текст на ВЕРХНІЙ РЕГІСТР:

let txt = "Hello World!";
txt = txt.;


Place for your advertisement!