Рядок – це послідовність з одного або декількох символів, яка може містити літери, числа та інші символи. JavaScript це найпростіший незмінний тип даних.

Рядки дозволяють відображати текст і працювати з ним, а текст – основний спосіб спілкування та передачі інформації в мережі. Тому рядки є одним із основних понять програмування.

Цей мануал навчить вас створювати та переглядати виведення рядків, об'єднувати рядки та зберігати їх у змінних. Також ви дізнаєтеся про правила використання лапок, апострофів та переходу до новому рядкуу JavaScript.

Створення та перегляд рядка

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

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

"This string uses single quotes.";
"This string uses double quotes.";

Третій та новий методстворення рядка називається шаблонним літералом. Шаблонні літерали пишуться у зворотних лапках (також цей символ називається тупим наголосом) і працюють так само, як звичайні рядкиз кількома додатковими функціями, які ми розглянемо у цій статті.

`This string uses backticks.`;

Найпростіший спосіб переглянути виведення рядка – ввести його в консоль за допомогою console.log().

console.log("This is a string in the console.");
Це є string в console.

Іншим простим способомзапитати значення рядка є спливаюче вікно в браузері, яке можна викликати за допомогою alert():

alert("This is a string in an alert.");

Цей рядок відкриє у браузері вікно сповіщення з таким текстом:

Це є string in an alert.

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

Зберігання рядків у змінних

Змінні JavaScript – це іменовані контейнери, які зберігають значення за допомогою ключових слів var, const або let. Рядки можна надавати змінним.

const newString = "Ця string є визначеною на variable.";

Тепер змінна newString містить рядок, на який можна послатися та вивести за допомогою консолі.

console.log(newString);
Це є string assigned to a variable.

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

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

Конкатенація рядків – це процес об'єднання двох або кількох рядків в один новий рядок. Конкатенація виконується за допомогою оператора +. Символ + також є оператором додавання в математичних операціях.

Для прикладу спробуйте об'єднати два короткі рядки:

"Sea" + "horse";
Seahorse

Конкатенація поєднує кінець одного рядка з початком іншого рядка, не вставляючи пробілів. Щоб пробіл між рядками, його потрібно додати в кінець першого рядка.

"Sea" + "horse";
Sea horse

Конкатенація дозволяє об'єднувати рядки та змінні зі рядковими значеннями.

const favePoem = "My favorite poem is" + poem + "by" + author ".";

Нові рядки, отримані в результаті конкатенації, можна використовувати у програмі.

Змінні із шаблонними літералами

Однією з особливостей шаблонних літералів є можливість включення до рядка виразів та змінних. Замість конкатенації можна використовувати синтаксис $() для вставки змінної.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = `My favorite poem is $(poem) by $(author).`;
My favorite poem є The Wide Ocean by Pablo Neruda.

Це синтаксис дозволяє отримати той самий результат. Шаблонні літерали полегшують конкатенацію рядків.

Рядкові літерали та рядкові значення

Як ви вже, мабуть, помітили, всі рядки пишуться в лапках або лапках, але при виведенні рядок лапок не містить.

"Beyond the Sea";
Beyond the Sea

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

У даному прикладі Beyond the Sea – це рядковий літерал, а Beyond the Sea – рядкове значення.

Обхід лапок та апострофів у рядках

У зв'язку з тим, що лапки використовуються для позначення рядків, існують спеціальні правила використання апострофів і лапок у рядках. Наприклад, апостроф у середині рядка в одинарних лапках JavaScript сприйме як одинарну лапку, що закриває, а решту передбачуваного рядка спробує прочитати як код.

Розглянемо такий приклад:

const brokenString = "I"m a broken string";
console.log(brokenString);
unknown: Unexpected token (1:24)

Те ж саме станеться, якщо спробувати використати подвійні лапкивсередині рядка взята в подвійні лапки. Інтерпретатор не помітить різниці.

Щоб уникнути подібних помилок, можна використати:

• Інший синтаксис рядків.
• Escape символи.
• Шаблонний літерал.

Альтернативний синтаксис рядків

Найпростіше обійти цю проблему за допомогою синтаксису, зворотного тому, що ви використовуєте у сценарії. Наприклад, рядки з апострофами брати в подвійні лапки:

"We"re safely using an apostrophe in double quotes."

Рядки з цитатами можна брати в одинарні лапки:

"Then he said, "Hello, World!"";

Комбінуючи одиночні та подвійні лапки, ви можете керувати відображенням лапок та апострофів усередині рядків. Однак це вплине на узгодженість синтаксису у файлах проекту, їх буде складно підтримувати.

Escape-символ \

За допомогою зворотного слеша JavaScript не інтерпретуватиме лапки як закриваючі.

Комбінація \' завжди сприйматиметься як апостроф, а \" - як подвійні лапки, без винятків.

Це дозволяє використовувати апострофи в рядках в одинарних лапках, а цитати – у рядках з подвійними лапками.

"We\"re safely using an apostrophe in single quotes."
"Then he said, "Hello, World!"";

Цей метод виглядає трохи безладно. Але він необхідний, якщо в одному рядку містяться і апостроф, і подвійні лапки.

Шаблонні літерали

Шаблонні літерали визначаються зворотними лапками, тому і подвійні лапки, і апострофи можна спокійно використовувати без будь-яких додаткових маніпуляцій.

`We're safely using apostrophes and "quotes" in a template literal.`;

Шаблонні літерали не тільки дозволяють уникнути помилок при відображенні лапок і апострофів, але також надають підтримку вбудованих виразів та багаторядкових блоків, про що йтиметься в наступному розділі.

Багаторядкові рядки та перехід до нового рядка

У деяких ситуаціях необхідно вставити символ нового рядка або розрив рядка. Escape-символи \n or \r допоможуть вставити новий рядок у виведення коду.

const threeLines = "This is a string\nthat spans across\nthree lines.";
This is a string
that spans across
три лінії.

Це розіб'є висновок на кілька рядків. Однак якщо у коді є довгі рядки, З ними буде складно працювати і читати. Щоб відобразити один рядок у кількох рядках, використовуйте оператор конкатенації.

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

Обійти новий рядок можна за допомогою escape-символу \.

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

Примітка: Цей метод не рекомендується використовувати, оскільки це може викликати проблеми в деяких браузерах.

Щоб зробити код легкочитаним, використовуйте шаблонні літерали. Це дозволяє виключити конкатенацію та escape-символи.

const threeLines = `This is a string
that spans across
three lines.`;
This is a string
that spans across
три лінії.

Оскільки різні бази коду можуть використовувати різні стандарти, важливо знати всі способи переходу до нового рядка та створення багаторядкових рядків.

Висновок

Тепер ви знаєте основні принципи роботи з рядками у JavaScript, вмієте створювати рядки та шаблонні літерали, виконувати конкатенацію та обхід та присвоювати рядки змінним.

Tags:

Існує кілька способів вибору підрядків JavaScript, включаючи substring(), substr(), slice()та функції regexp.

JavaScript 1.0 і 1.1, substring()існує як єдиний простий спосіб вибору частини більшого рядка. Наприклад, щоб вибрати рядок pressз Expression, використовуйте "Expression".substring(2,7). Перший параметр для функції - символьний індекс, в якому починається вибір, тоді як другий параметр - символьний індекс, в якому закінчується вибір (що не включає): substring(2,7)включає індекси 2, 3, 4, 5, та 6.

JavaScript 1.2, функції substr(), slice()і regexpможуть також використовуватися для розбиття рядків.

Substr()поводиться так само, як і substrмови Перл, де перший параметр позначає символьний індекс, у якому починається вибір, тоді як другий параметр вказує довжину підрядка. Щоб виконати те саме завдання, як у попередньому прикладі, потрібно використовувати "Expression".substr(2,5). Пам'ятайте, 2 - це точка початку, а 5 - довжина, що виникає в результаті підрядка.

При використанні на рядках, slice()веде себе аналогічно до функцій substring(). Це, проте, набагато більше потужний засібздатне функціонувати з будь-яким типом масиву, і не тільки з рядками. slice()також використовує негативні усунення звернення до потрібної позиції, починаючи з кінця рядка. "Expression".slice(2,-3)поверне підрядок, знайдений між другим символом і третім символом з кінця, повертаючи знову press.

Останній і найбільш універсальний методдля роботи з підрядками - це робота через регулярні функціївирази у JavaScript 1.2. Ще раз, звертаючи увагу на той же приклад, підрядок "press"виходить з рядка "Expression":

Write("Expression".match(/press/));

Вбудований об'єкт String

Об'єкт StringЦе об'єктна реалізація примітивного рядкового значення. Його конструктор має вигляд:

New String( значення?)

Тут значеннябудь-який рядковий вираз, що задає примітивне значення об'єкта. Якщо вона не вказана, то примітивне значення об'єкта дорівнює "".

Властивості об'єкта String:

constructorКонструктор, що створив об'єкт. Кількість символів у рядку. prototype

Посилання на клас класу об'єктів.

Стандартні методи об'єкту String Повертає символ, що знаходиться в цій позиції рядка.Повертає код символу, що знаходиться в цій позиції рядка. Повертає конкатенацію рядків.Створює рядок із символів, заданих кодами Unicode.

Повертає позицію першого входження заданого підрядка.

Повертає позицію останнього входження заданого підрядка. Порівнює два рядки з урахуванням мови (…операційної системи …. …. …. …. …. …. …Порівнює рядок з регулярним виразом. Порівняє рядок з регулярним виразом і замінює знайдений підрядок новим підрядком.Шукає зіставлення рядка із регулярним виразом. …. …. . .

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

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

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

Перетворює об'єкт у рядок.

Розбиває рядок на масив підрядків. : Повертає підрядок,Перетворює всі літери рядка в великі. Повертає примітивне значення об'єкта.) Нестандартні методи об'єкту String: Повертає примітивне значення об'єкта. Створюєзакладку HTML

). Укладає рядок у теги .Укладає рядок у теги …. Створюєгіперпосилання HTML (|).") .

Укладає рядок у теги

Розбиває рядок на масив підрядків. : Повертає підрядок,Властивість length Створюєзакладку HTML

). Синтаксисоб'єкт .Укладає рядок у теги ….length великим шрифтом. Наприклад, оператор document.write("Мій текст".big()) виведе на екран браузера рядок Мій текст.

Метод blink

Розбиває рядок на масив підрядків. : Повертає підрядок,.blink() Створюєзакладку HTML

). blinkповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги …. Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується разом з методами document.write та document.writeln для відображення тексту миготливим шрифтом. Зазначені тегине входять до стандарту HTML і підтримуються лише браузерами Netscape і WebTV. Наприклад, оператор document.write("Мій текст".blink()) виведе на екран браузера рядок Мій текст.

Метод bold

Розбиває рядок на масив підрядків. : Повертає підрядок,.bold() Створюєзакладку HTML

). boldповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги …. Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту напівжирним шрифтом. Наприклад, оператор document.write("Мій текст".bold()) виведе на екран браузера рядок .

Мій текст

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод charAt .charAt() Нестандартні методи об'єкту String: .charAt(позиція Створюєзакладку HTML

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

порожня стрічка

Розбиває рядок на масив підрядків. : Повертає підрядок,. Наприклад, оператор document.write("Рядок".charAt(0)) виведе на екран браузера символ С. .charAt() Нестандартні методи об'єкту String: .charAt(позиція Створює: Метод charCodeAt

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

Наприклад, оператор document.write("Рядок".charCodeAt(0).toString(16)) виведе на екран браузера

Розбиває рядок на масив підрядків. : Повертає підрядок,шістнадцятковий код російської літери "С": 421 ., Метод concat, …, . concat () Нестандартні методи об'єкту String: російської літери "С": 421 ., Метод concat, …, . concat (рядок0 Створюєзакладку HTML

). рядок1рядокN

Повертає підрядок, + російської літери "С": 421 . + Метод concat + … + . concat (

будь-які строкові вирази

concat

Розбиває рядок на масив підрядків. : Повертає підрядок,повертає новий рядок, що є конкатенацією вихідного рядка та аргументів методу. Цей метод еквівалентний операції Створюєзакладку HTML

). Наприклад, оператор document.write("Мороз і сонце. ".concat("День чудесний.")) виведе на екран браузера рядок Мороз і сонце. День чудовий.повертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги …Метод fixed

.fixed()

Розбиває рядок на масив підрядків. : Повертає підрядок, fixed Нестандартні методи об'єкту String: .Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту телетайпним шрифтом. Наприклад, оператор document.write("Мій текст".fixed()) виведе на екран браузера рядок Мій текст. Створюєзакладку HTML

). Метод fontcolorповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги .>….length .fontcolor(колір). Наприклад, оператор document.write("Мій текст".fontcolor("red")) виведе на екран браузера рядок Мій текст .

Метод fontsize

Розбиває рядок на масив підрядків. : Повертає підрядок,.fontsize( розмір) Нестандартні методи об'єкту String: розмірЧисельний вираз Створюєзакладку HTML

). fontsizeповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги …. Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту шрифтомзаданого розміру

. Наприклад, оператор document.write("Мій текст".fontsize(5)) виведе на екран браузера рядок Мій текст .

Розбиває рядок на масив підрядків. Метод відCharCode : String.fromCharCode(, код1, …, код2) Нестандартні методи об'єкту String: : String.fromCharCode(, код1, …, код2кодN Створюєзакладку HTML

). числові виразивідCharCode створює новий рядок (але не рядковий об'єкт), який є конкатенацієюсимволів Unicode : String.fromCharCode(, код1, …, код2.

з кодами Цестатичний метод Stringоб'єкта

тому для доступу до нього не потрібно спеціально створювати рядковий об'єкт. Приклад:

Var s = String.fromCharCode (65, 66, 67); // s дорівнює "ABC"

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод indexOf .indexOf([,підрядок]?) Нестандартні методи об'єкту String: .indexOf(початок підрядокпозиція Створюєбудь-який рядковий вираз

). : числове значення indexOf повертає першу позиціюпідрядки .. Повертає підрядок, підрядок підрядок підрядок підрядоку примітивному значенні рядкового Повертає підрядок, Повертає підрядок,

більше ніж

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

Наступний приклад підраховує кількість входжень підрядка pattern у рядок str.

Розбиває рядок на масив підрядків. : Повертає підрядок, Function occur(str, pattern) ( var pos = str.indexOf(pattern); for (var count = 0; pos != -1; count++) pos = str.indexOf(pattern, pos + pattern.length); return count ;) Створюєзакладку HTML

). Метод italicsповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги ….italics() Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту напівжирним шрифтом. Наприклад, оператор document.write("Мій текст".bold()) виведе на екран браузера рядок .

italics

Розбиває рядок на масив підрядків. : Повертає підрядок,. .indexOf([,підрядок]?) Нестандартні методи об'єкту String: .indexOf(початок підрядокпозиція Створюєбудь-який рядковий вираз

). Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту курсивним шрифтом. Наприклад, оператор document.write("Мій текст".italics()) виведе на екран браузера рядокМетод lastIndexOf повертає першу позицію.lastIndexOf( . Повертає підрядок, lastIndexOf підрядокповертає останню позицію підрядоку примітивному значенні рядкового підрядок. -1. Якщо задано необов'язковий аргумент, то пошук ведеться, починаючи з позиції підрядоку примітивному значенні рядкового Повертає підрядок,; Повертає підрядок,якщо ні, то з позиції 0, тобто з першого символу рядка. Якщо

негативно, то воно приймається

рівним нулю

; якщо

Розбиває рядок на масив підрядків. : Повертає підрядок,. -1, то воно приймається рівним . -1.) Нестандартні методи об'єкту String: . -1.Якщо об'єкт не містить цього рядка, то повертається значення -1. Створюєзакладку HTML

). Пошук ведеться праворуч наліво. В іншому цьому метод ідентичний методу.повертає рядок, що складається з примітивного значення рядкового .Приклад:. Перевірки на те, чи не був вихідний рядок вже укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write і document.writeln для створення в HTML-документі гіперпосилання із заданим . -1.. Наприклад, оператор document.write("Мій текст".link("#Закладка")) еквівалентний оператору document.write("Мій текст") .

Метод localeCompare

Розбиває рядок на масив підрядків. : Повертає підрядок,.localeCompare( Метод concat) Нестандартні методи об'єкту String: Метод concatЯкщо об'єкт не містить цього рядка, то повертається значення -1. Створює: число

Підтримка

). localeCompareпорівнює два рядки з урахуванням національних установок операційної системи. Він повертає -1, якщо примітивне значення .менше рядки1, +1, якщо воно більше рядки1, та 0, якщо ці значення збігаються.

Метод match

Розбиває рядок на масив підрядків. : Повертає підрядок,.match( регвір) Нестандартні методи об'єкту String: регвір Створює: масив рядків

). match регвір .. Результатом зіставлення є масив знайдених підрядків або null, якщо відповідності немає. При цьому:

• Якщо регвірне містить опцію глобального пошуку, то виконується метод регвір.exec(Повертає підрядок,) та повертається його результат. Результуючий масив містить в елементі з індексом 0 знайдений підрядок, а в інших елементах - підрядки, що відповідають виразам регвір, укладені в круглі дужки.
• Якщо регвірмістить опцію глобального пошуку, то метод регвір.exec(Повертає підрядок,) виконується до тих пір, поки знаходяться відповідності. Якщо n кількість знайдених відповідностей, то результатом є масив з n елементів, які містять знайдені підрядки. Властивості регвір.lastIndexнадається номер позиції у вихідному рядку, який вказує на перший символ після останньої знайденої відповідності, або 0, якщо відповідності не знайдено.

Слід пам'ятати, що метод регвір.execзмінює властивості об'єкта регвір. Приклади:

Метод replace

Розбиває рядок на масив підрядків. : Повертає підрядок,.replace( регвір,рядок) Повертає підрядок,.replace( регвір,функція) Нестандартні методи об'єкту String: регвіррегулярний вираз рядок рядковий вираз функціяім'я функції або декларація функції Створює: новий рядок

). replaceзіставляє регулярне вираження регвірз примітивним значенням рядкового .і замінює знайдені підрядки іншими підрядками. Результатом є новий рядок, який є копією вихідного рядка із проведеними замінами. Спосіб заміни визначається опцією глобального пошуку в регвірта типом другого аргументу.

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

рядок, та проводиться їх заміна. , Заміна кожної знайденої підрядки проводиться на неї. У цьому рядок може містити такі властивості об'єкта, як $1, $9, lastMatch, lastParen, leftContext і rightContext.

Наприклад, оператор document.write("Смачні яблука, соковиті яблука.".replace(/яблука/g, "груші")) виведе на екран браузера рядок Смачні груші, соковиті груші. функціяЯкщо другим аргументом є регвір, то заміна кожного знайденого підрядка здійснюється викликом цієї функції. Функція має такі аргументи. Перший аргумент - це знайдений підрядок, потім слідують аргументи, що відповідають всім виразам replace, укладеним у круглі дужки, передостанній аргумент – це позиція знайденого підрядка у вихідному рядку, рахуючи з нуля, і останній аргумент – це сам вихідний рядок. Наступний приклад показує, як за допомогою методу

можна написати функцію перетворення градусів Фаренгейта на градуси Цельсія. Наведений сценарій

Function myfunc($0,$1) ( return (($1-32) * 5 / 9) + "C"; ) function f2c(x) ( var s = String(x); return s.replace(/(\d+( \.\d*)?)F\b/, myfunc); ) document.write(f2c("212F"));

виведе на екран оглядача рядок 100C. регвір.

Слід пам'ятати, що цей метод змінює властивості об'єкту

Приклад використання replace

Заміна всіх входжень підрядки у рядок

Часто трапляється, що потрібно замінити всі входження одного рядка в інший рядок:

Var str = "foobarfoobar"; str=str.replace(/foo/g,"xxx"); // у результаті вийде str = "xxxbarxxxbar";

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод search регвір) Нестандартні методи об'єкту String: регвір.search( Створюєбудь-який регулярний вираз

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

не змінюються.

Розбиває рядок на масив підрядків. : Повертає підрядок,Приклади: підрядок [,Метод slice]?) Нестандартні методи об'єкту String: підрядокі Метод slice.slice( Створює: новий рядок

). кінець .будь-які числові вирази підрядок slice Метод slice, від позиції Метод slice підрядокдо позиції

не включаючи її. Якщо Повертає підрядок,та до кінця вихідного рядка. підрядок Повертає підрядок,. +підрядокПозиції символів рядка нумеруються від нуля до Метод slice. -1. Повертає підрядок,. +Метод sliceЯкщо значення

.

Якщо значення

Розбиває рядок на масив підрядків. : Повертає підрядок,негативно, то воно замінюється на Створюєзакладку HTML

). .повертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги ….length Іншими словами, негативні аргументи трактуються як усунення від кінця рядка.Результатом є рядкове значення, а чи не рядковий об'єкт. Наприклад, оператор document.write("ABCDEF".slice(2,-1)) виведе на екран браузера рядок CDE .

Метод small

Розбиває рядок на масив підрядків. : Повертає підрядок,.small() small [,дрібним шрифтом]?) Нестандартні методи об'єкту String: small. Наприклад, оператор document.write("Мій текст".small()) виведе на екран браузера рядок Мій текст. дрібним шрифтомЧисельний вираз СтворюєМетод split .split()

). роздільникчисло .на масив підрядок і повертає його. Розбиття на підрядки проводиться в такий спосіб. Вихідний рядок проглядається зліва направо у пошуках роздільника. Як тільки він знайдений, підрядок від кінця попереднього роздільника (або від початку рядка, якщо це перше входження роздільника) до початку знайденого додається масив підрядків. Таким чином, сам роздільник у текст підрядка не потрапляє.

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

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

У наступному прикладі регулярний вираз використовується для завдання тегів HTMLяк роздільник. Оператор

виведе на екран оглядача рядок Текст, напівжирний і курсивний.

Метод strike

Розбиває рядок на масив підрядків. : Повертає підрядок,.strike() Створюєзакладку HTML

). strikeповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги ….

Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується разом із методами document.write та document.writeln для відображення тексту перекресленим шрифтом. Наприклад, оператор document.write("Мій текст".strike()) виведе на екран браузера рядок Мій текст.

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод sub Створюєзакладку HTML

). .sub()повертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги  sub

.

Розбиває рядок на масив підрядків. : Повертає підрядок,Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту як нижнього індексу. Наприклад, оператор document.write("Мій текст".sub()) виведе на екран браузера рядок Мій текст. .charAt( [,Метод substr]?) Нестандартні методи об'єкту String: .charAt(і Метод substrкодN Створюєзакладку HTML

). substr.substr( .довжина повертає рядок, що складається із символу, розташованого в данійповертає підстроку примітивного значення рядкового Метод substr, що починається з даної Метод substrі містить повертає рядок, що складається із символу, розташованого в данійсимволів. Якщо Метод substrне задана, то повертається підрядок, починаючи з даної

не включаючи її. Якщо Повертає підрядок,та до кінця вихідного рядка. Якщо .charAt(негативна чи дорівнює нулю, то повертається порожній рядок. Повертає підрядок,. -1. .charAt(Якщо Повертає підрядок,.+.charAt(.

Приміткабільше або дорівнює .charAt(., то повертається порожній рядок. Якщо негативна, вона трактується як усунення з кінця рядка, т. е. замінюється на. Якщо

негативна, то

Internet Explorer

Розбиває рядок на масив підрядків. : Повертає підрядок,помилково замінює її на 0, тому з метою сумісності цей варіант використовувати не слід. підрядок [,Метод slice]) Нестандартні методи об'єкту String: підрядокі Метод sliceкодN Створюєзакладку HTML

). Var src = "abcdef"; var s1 = src.substr(1, 3); // "bcd" var s2 = src.substr(1); // "bcdef" var s3 = src.substr(-1); // "f", але в MSIE: "abcdef".substr( .будь-які числові вирази підрядок slice Метод slice, від позиції Метод sliceМетод substring підрядокдо позиції

не включаючи її. Якщо Повертає підрядок,.substring( повертає число, що дорівнює коду Unicode символу, розташованого в данійзамінюються на нуль; якщо аргумент більше довжини вихідного рядка, він замінюється на неї. Якщо підрядокбільше кінця, то вони міняються місцями. Якщо підрядокодно кінцю, то повертається порожній рядок.

Результатом є рядкове значення, а чи не рядковий об'єкт. Приклади:

Var src = "abcdef"; var s1 = src.substring(1, 3); // "bc" var s2 = src.substring(1, -1); // "a" var s3 = src.substring(-1, 1); // "a"

Метод sup

Розбиває рядок на масив підрядків. : Повертає підрядок,.sup() Створюєзакладку HTML

). supповертає рядок, що складається з примітивного значення рядкового .Укладає рядок у теги .

Перевірки на те, чи вихідний рядок вже не був укладений у ці теги, не робиться. Цей метод використовується спільно з методами document.write та document.writeln для відображення тексту як верхнього індексу. Наприклад, оператор document.write("Мій текст".sup()) виведе на екран браузера рядок Мій текст.

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод доLocaleLowerCase Створює.toLocaleLowerCase()

Підтримка: новий рядок

). : Internet Explorer Підтримується з версії 5.5. Netscape Navigator Не підтримується.доLocaleLowerCase

повертає новий рядок, в якому всі літери вихідного рядка замінені на малі з урахуванням національних установок операційної системи. Інші символи вихідного рядка не змінюються. Вихідний рядок залишається колишнім. Зазвичай цей метод повертає той самий результат, що і ; відмінність можлива лише в тому випадку, якщо кодування мови суперечить правилам Unicode щодо перетворення великих літер на малі.

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод доLocaleUpperCase Створює.toLocaleLowerCase()

Підтримка: новий рядок

). .toLocaleUpperCase()доLocaleUpperCase

повертає новий рядок, у якому всі літери вихідного рядка замінені на великі з урахуванням національних установок операційної системи. Інші символи вихідного рядка не змінюються. Вихідний рядок залишається колишнім. Зазвичай цей метод повертає той самий результат, що і ; відмінність можлива тільки в тому випадку, якщо кодування мови суперечить правилам Unicode з перетворення малих літер на великі.

Розбиває рядок на масив підрядків. : Повертає підрядок,Метод доLowerCase Створює: новий рядок

). .toLowerCase()доLowerCase

повертає новий рядок, у якому всі літери вихідного рядка замінені на малі. Інші символи вихідного рядка не змінюються. Вихідний рядок залишається колишнім. Наприклад, оператор document.write("об'єкт String".toLowerCase()) виведе на екран браузера рядок об'єкт string . Вітаю всіх, хто ґрунтовно вирішив вивчити прототипно-орієнтовану мову. Минулого я розповів вам про , а сьогодні ми розбиратимемо рядки JavaScript-а. Бо в цій мові всетекстові елементи

Саме тому в цій публікації я розповім вам, як створюються малі елементи, які методи та властивості для них передбачені, як правильно конвертувати рядки, наприклад, перетворювати на число, яким чином можна отримати потрібне підрядження та багато іншого. На додаток до цього я прикріплю приклади програмного коду. А тепер уперед за справу!

Синтаксис малих змінних

У мові js всі змінні оголошуються за допомогою ключового слова var, а в залежності від формату оформлення параметрів визначається тип оголошеної змінної. Як ви пам'ятаєте з JavaScript, в JavaScript-і відсутня сувора типізація. Саме тому в коді і ось така ситуація.

При ініціалізації змінних значенняможуть бути обрамлені в подвійні, одинарні, а починаючи з 2015 року та в скошені одинарні лапки. Нижче наведено приклади кожного способу оголошення рядків.

Хочу приділити особливу увагутретій спосіб. Він має низку переваг.

З його допомогою можна спокійно здійснювати перенесення рядка і це буде виглядати так:

alert (`кілька

переношу

А ще третій спосіб дозволяє використовувати конструкцію $(…). Такий інструмент потрібний для вставки інтерполяції. Не лякайтеся, зараз розповім, що це таке.

Завдяки $(…) у рядки можна вставляти не тільки значення змінних, а ще й виконувати з ними арифметичні та логічні операції, Викликати методи, функції і т.д. Усе це називається одним терміном – інтерполяція. Ознайомтеся із прикладом реалізації цього підходу.

1 2 3

var pen = 3; var pencil = 1; alert(`$(pen) + $(pencil*5) = $(pen + pencil)`);

var pen = 3; var pencil = 1; alert(`$(pen) + $(pencil*5) = $(pen + pencil)`);

У результаті екран виведеться вираз: «3 + 1*5 = 8».

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

Поговоримо трохи про спеціальні символи

Багато мовах програмування є спеціальні символи, які допомагають керувати текстом у рядках. Найвідоміший серед них – це перенесення рядка (\n).

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

Нижче я прикріпив невелику табличку, де перелічені деякі спеціальні символи.

Запасаємось важким арсеналом методів та властивостей

Розробниками мови було передбачено безліч методів та властивостей для спрощення та оптимізації роботи з рядками. А з випуском нового стандарту під назвою ES-2015 минулого року, цей список поповнився новими інструментами.

Length

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

var string = "Єдинороги";

alert (string.length);

У відповіді буде виведено число 9. Також цю властивість можна застосовувати і до самих значень:

"Єдинороги". length;

Результат не зміниться.

charAt()

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

var string = "Єдинороги";

alert(string.charAt(0));.

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

Від toLowerCase() до toUpperCase()

Ці методи керують регістром символів. Під час написання коду «Контент».

доUpperCase()все слово буде відображено великими літерами.

Для протилежного ефекту варто використовувати Контент. доLowerCase ().

indexOf()

Затребуване та потрібний засібдля пошуку підрядка. Як аргумент потрібно вписати слово або фразу, яку необхідно знайти, а метод повертає позицію знайденого елемента. Якщо ж не знайдений текст, користувачеві повернеться «-1».

1 2 3 4

var text = "Організувати пошук кольорів!"; alert(text.indexOf("колір")); //19 alert(text.indexOf(" ")); //12 alert(text.lastIndexOf(" ")); //18

var text = "Організувати пошук кольорів!"; alert(text.indexOf("колір")); //19 alert(text.indexOf(" ")); //12 alert(text.lastIndexOf(" ")); //18

Зауважте, що lastIndexOf() виконує ті ж дії, тільки пошук здійснюється з кінця пропозиції.

Вилучення підрядків

Для цього дії в js було створено три приблизно однакові методи.

Розберемо спочатку substring (start, end)і slice (start, end). Працюють однаково. Перший аргумент визначає початкову позицію, з якої почнеться вилучення, а другий відповідає за кінцевий пункт зупинки. В обох методах рядок виймається, не включаючи символ, розташований на позиції end.

var text = "Атмосфера"; alert(text.substring(4)); // виведе "сфера" alert(text.substring(2, 5)); / / Відобразить "мос" alert (text.slice (2, 5)); //Відобразить «мос»

А тепер розберемо третій метод, який називається substr(). У ньому також потрібно прописувати 2 аргументи: startі Перетворює всі літери рядка в великі з урахуванням мови операційної системи..

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

var text = "Атмосфера";

alert (text.substr (2, 5)); //Відобразить «мосфі»

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

Replase ()

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

У цьому прикладі заміниться підрядок лише у першому слові.

var text = "Атмосфера Атмосфера"; var newText = text.replace("Атмо","Страто") alert(newText) // Результат: Стратосфера Атмостфера

А в цій програмної реалізаціїчерез прапор регулярного вираження"g" буде виконано глобальну заміну.

var text = "Атмосфера Атмосфера"; var newText = text.replace(/Атмо/g,"Страто") alert(newText) // Результат: Стратосфера Стратосфера

Займемося конвертацією

У JavaScript передбачено лише три види перетворення типів об'єктів:

1. Числове;
2. Строкове;
3. Логічне.

У поточній публікації я розповім про 2 з них, оскільки знання про них потрібні для роботи з рядками.

Числове перетворення

Щоб значення елемента явно перетворити до числового вигляду, можна використовувати Номер (value).

Є й коротший вираз: +«999».

var a = Number («999»);

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

Виконується функцією alert, а також явним викликом String (text).

1 2 3

alert (999+ "super price") var text = String(999) alert(text === "999");

alert (999+ "super price") var text = String(999) alert(text === "999");

На цій ноті я вирішив закінчити свою роботу. Підписуйтесь на мій блог та не забувайте ділитися посиланням на нього зі своїми друзями. Бажаю удачі у навчанні. Бувай!

З повагою, Роман Чуєшов

Прочитано: 130 разів

Вітаю! У цьому уроці розглянемо як у JavaScript можна створити рядок та функції для роботи з рядками. У принципі JavaScript будь-яка текстова змінна є рядком, оскільки JavaScript є не строго типізованим мовою програмування (про типи даних читайте ). І також для роботи з рядками використовується клас String:

Var name1 = "Tommy";

Так і використовувати конструктор String:

Var name1 = новий String("Tommy");

В основному використовується перший метод напевно тому що він більш короткий.

Клас для роботи зі рядками Stringмає у своєму арсеналі досить великий набір властивостей та функцій, за допомогою яких ви можете здійснювати різні маніпуляції з рядками.

Довжина рядка

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

Var hello1 = "привіт світ"; document.write("У рядку "" + hello + "" " + hello1.length + " символів");

Пошук у рядку

Для того щоб знайти в рядку деякий підрядок застосовуються функції indexOf() (повертає індекс першого входження підрядка) та lastIndexOf() (повертає індекс останнього входження підрядка). Ці функції приймають два аргументи:

• Підрядок, який власне і треба знайти
• Необов'язковий аргумент, який показує, з якого символу потрібно проводити пошук підрядки у рядку

Обидві функції повертають число, яке є індексом символу, з якого в рядку починається підрядок. Якщо підрядок не знайдено, то повернеться число -1. Тому дані функції використовуються в логічних операторах , тому що як правило треба просто перевірити, чи містить рядок підрядок чи ні, то в цьому випадку результат роботи цих функцій порівнюється з -1.

Var str1 = "Привіт Васю!"; var podstr = "Петя"; if(str.indexOf(podstr) == -1)( document.write("Подстрока не найдена."); ) else ( document.write("Подстрока знайдена."); )

У прикладі буде виведено повідомлення «Підрядок не знайдено», оскільки рядок «Петя» не міститься у рядку «Привіт Васю!».

Вибір підрядка

Для вирізання з рядка підрядка використовуються такі функції як substr() і substring().

Функція substring() приймає 2 аргументи:

• стартова позиція символу в рядку, починаючи з якого буде проведено обрізання рядка
• кінцева позиція, до якої треба обрізати рядок

var hello1 = "привіт світ. До побачення світ"; var world1 = hello1.substring(7, 10); //з ​​7-го по 10-й індекс document.write(world1); //мир

Функція substr() також як один параметр приймає стартовий індекс підрядка, а ось як другий - довжину підрядка:

Var hello1 = "привіт світ. До побачення світ"; var bye1 = hello1.substr(12, 2); document.write(bye1);//До

Та й якщо другий параметр не вказувати, то рядок буде обрізаний до кінця:

Var hello1 = "привіт світ. До побачення світ"; var bye1 = hello1.substr(12); document.write(bye1); //поки світ

Управління регістром букв

Для зміни регістру літер, тобто щоб зробити всі літери маленькими або великими, використовуються функції toLowerCase() (для перекладу символів у нижній регістр, тобто всі літери будуть маленькими) і toUpperCase() (для перекладу символів у верхній регістр, тобто всі літери будуть більшими).

Var hello1 = "Привіт Джим"; document.write(hello1.toLowerCase() + "
"); //Привіт джим document.write(hello1.toUpperCase() + "
"); // ПРИВІТ ДЖИМ

Отримання символу за його індексом

Щоб знайти певний символ у рядку за його індексом, застосовуються функції charAt() і charCodeAt(). Обидві ці функції як аргумент приймають індекс символу:

Var hello1 = "Привіт Джим"; document.write(hello1.charAt(3) + "
"); //в document.write(hello1.charCodeAt(3) + "
"); //1080

Але тільки якщо як результат своєї роботи функція charAt() поверне сам символ, то функція charCodeAt() поверне числовий Юнікод код цього символу.

Видалення прогалин

Для видалення прогалин у стоку використовується функція trim():

Var hello1 = "Привіт Джим"; var beforeLen = hello1.length; hello1 = hello1.trim(); var afterLen = hello1.length; document.write("Довжина рядка до: " + beforeLen + "
"); //15 document.write("Довжина рядка після: " + afterLen + "
"); //10

Об'єднання рядків

Функція concat() дозволяє об'єднати 2 рядки:

Var hello1 = "Привіт"; var world1 = "Вася"; hello1 = hello1.concat(world1); document.write(hello); //Привіт Василь

Заміна підрядка

Функція replace() дозволяє замінити один підрядок на інший:

Var hello1 = "Добрий день"; hello1 = hello1.replace("день", "вечір"); document.write(hello1); //Добрий вечір

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

Поділ рядка на масив

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

Var mes = "Сьогодні була чудова погода"; var stringArr = mes.split(" "); for(var str1 in stringArr) document.write(stringArr + "
");

ПІДСУМКИ

Рядки можна створити просто за допомогою звичайної змінної, достатньо в неї помістити текст або за допомогою класу String.

Щоб дізнатися довжину рядка використовується властивість length.

Рядки порівнюються буквально. Тому якщо в рядку є число, то такі числа можуть бути некоректно порівняні, для цього рядок потрібно перетворити його до типу number (про клас Number читайте).

Також при порівнянні рядків слід враховувати регістр літер. Велика літераменше маленької, а літера її поза алфавітом взагалі.

ЗАВДАННЯ

Заміна регістру останньої літери у рядку

Напишіть функцію lastLetterStr(str), яка замінюватиме регістр останньої літери, роблячи її великою.

Перевірка на спам

Напишіть функцію provSpam(str), яка перевірятиме рядок на наявність підрядків: "spam", "sex", "xxx". І повертати true, якщо є дані підрядки і false в іншому випадку.

Знайти число

Напишіть функцію extrNum(str), яка з рядка отримує число, якщо рядок містить число і функція повертає число. Наприклад, є рядок «120грн» потрібно повернути з рядка 120.

І на закріплення дивіться відео по роботі з рядками JavaScript.