Як семантичні «каркаси» використання функцій та конструкцій для обробки рядків становлять особливий інтерес для програмування процесів обробки інформації за її змістовим змістом. Мовою JavaScript функціїроботи з рядками можна комбінувати у власні смислові конструкції, спрощуючи код та формалізуючи предметну областьзавдання.

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

Опис рядкових змінних

Для оголошення рядка використовується конструкція var.Можна відразу задати її значення або формувати його під час виконання алгоритму. Для рядка можна використовувати одинарні або подвійні лапки. Якщо в ній має бути лапка, її необхідно екранувати символом \.

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

У даному прикладіу рядку «str_dbl» перелічені корисні спеціальні символи, які можна використовувати у рядку. При цьому сам символ \ екранується.

Рядок - це завжди масив

Робота JavaScript з рядками може виконуватися безліччю способів. Синтаксис мови надає багато варіантів. Насамперед ніколи не слід забувати, що (в контексті зроблених описів):

• str_isV => "V";
• str_chr => """;
• str_dbl => "a".

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

Використання функції charAt() дає аналогічний ефект:

• str_isV.charAt(3) => "V";
• str_chr.charAt(1) => """;
• str_dbl.charAt(5) => "a".

Програміст може використати будь-який варіант.

Основні рядкові функції

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

Найважливіший метод рядка (правильніше - властивість) - його довжина.

• var xStr = str_isV.length + "/" + str_chr.length + "/" + str_dbl.length.

Результат: 11/12/175 за рядками наведеного вище опису.

Найважливіша мала рядок функцій - поділ рядка на масив елементів і злиття масиву в рядок:

• split(s [, l]);
• join(s).

У першому випадку рядок розбивається за символом-розділювачем "s" на масив елементів, в якому кількість елементів не перевищує значення "l". Якщо кількість не задано, то розбивається весь рядок.

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

Примітна особливість цієї пари: розбиття можна проводити по одному роздільнику, а злиття - по іншому. У цьому контексті в JavaScript робота з рядками може бути виведена за межі синтаксису мови.

Класичні малі функції

Звичайні функції обробки рядків:

• пошук;
• вибірка;
• заміна;
• перетворення.

Представлені методами: indexOf(), lastIndexOf(), toLowerCase(), toUpperCase(), concan(), charCodeAt() та іншими.

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

Наприклад, використання методу concat() припустимо, але простіше написати:

• str = str1 + str2 + str3;

Застосування функції charAt() теж має сенс, тоді як застосування charCodeAt() має реальне практичне значення. Аналогічно, для JavaScript перенесення рядка має особливе значення: у контексті виведення на екран, наприклад, у повідомленні alert() - це \n, у конструкції формування контенту сторінки
». У першому випадку це просто символ, а в другому рядок символів.

Рядки та регулярні вирази

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

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

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

Приклади регулярних виразів

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

Тут представлені функції, які перевіряють, чи введення містить ціле число (schInt) або число речовинне (schReal). Наступний приклад показує, наскільки ефективно обробляти рядки, перевіряючи їх наявність лише допустимих символів: schText - лише текст, schMail - правильна адресаелектронної пошти.

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

Слід особливо відзначити, що далеко не завжди слід виконувати завдання, як воно поставлене. Зокрема щодо перевірки цілих чисел і речових: можна обійтися не класичними малими методами, а звичайними конструкціямисинтаксису.

Об'єктно-орієнтовані рядки

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

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

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

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

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

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

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

Існує кілька способів вибору підрядків 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

Синтаксис : об'єкт.length Атрибути: ( DontEnum, DontDelete, ReadOnly )

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

Метод anchor

Синтаксис : об'єкт.anchor( ім'я) Аргументи: ім'я Результат: строкове значення

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

Метод big

Синтаксис : об'єкт.big() Результат: строкове значення

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

Метод blink

Синтаксис : об'єкт.blink() Результат: строкове значення

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

Метод bold

Синтаксис : об'єкт.bold() Результат: строкове значення

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

Метод charAt

Синтаксис : об'єкт.charAt( позиція) Аргументи: позиціябудь-яке числове вираз Результат: строкове значення

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

Метод charCodeAt

Синтаксис : об'єкт.charCodeAt( позиція) Аргументи: позиціябудь-яке числове вираз Результат: числове значення

Метод charAtповертає число, що дорівнює коду Unicode символу, розташованого в даній позиціїпримітивного значення рядкового об'єкта. Позиції символів рядка нумеруються від нуля до об'єкт. -1. Якщо позиція лежить поза цим діапазоном, то повертається NaN. Наприклад, оператор document.write("Рядок".charCodeAt(0).toString(16)) виведе на екран браузера шістнадцятковий кодросійської літери "С": 421 .

Метод concat

Синтаксис : об'єкт. concat ( рядок0, рядок1, …, рядокN) Аргументи: рядок0, рядок1, …, рядокNбудь-які строкові вирази Результат: строкове значення

Метод concatповертає новий рядок, що є конкатенацією вихідного рядка та аргументів методу. Цей метод еквівалентний операції

об'єкт + рядок0 + рядок1 + … + рядокN

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

Метод fixed

Синтаксис : об'єкт.fixed() Результат: строкове значення

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

Метод fontcolor

Синтаксис : об'єкт.fontcolor(колір) Аргументи: колір| рядковий вираз Результат: строкове значення

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

Метод fontsize

Синтаксис : об'єкт.fontsize( розмір) Аргументи: розмірЧисельний вираз Результат: строкове значення

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

Метод відCharCode

Синтаксис : String.fromCharCode( код1, код2, …, кодN) Аргументи: код1, код2, …, кодNчислові вирази Результат: строкове значення

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

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

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

Метод indexOf

Синтаксис : об'єкт.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 ;)

Метод italics

Синтаксис : об'єкт.italics() Результат: строкове значення

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

Метод lastIndexOf

Синтаксис : об'єкт.lastIndexOf( підрядок[,початок]?) Аргументи: підрядокбудь-який рядковий вираз початокбудь-яке числове вираз Результат: числове значення

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

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

Var n = "Білий кит". // n дорівнює 6

Метод link

Синтаксис : об'єкт.link( uri) Аргументи: uriбудь-який рядковий вираз Результат: строкове значення

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

Метод localeCompare

Синтаксис : об'єкт.localeCompare( рядок1) Аргументи: рядок1будь-який рядковий вираз Результат: число

Підтримка

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

Метод match

Синтаксис : об'єкт.match( регвір) Аргументи: регвір Результат: масив рядків

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

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

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

Метод replace

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

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

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

рядок, Заміна кожної знайденої підрядки проводиться на неї. У цьому рядок може містити такі властивості об'єкта RegExp, як $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

Синтаксис : об'єкт.search( регвір) Аргументи: регвірбудь-який регулярний вираз Результат: числове вираз

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

Метод slice

Синтаксис : об'єкт.slice( початок [,кінець]?) Аргументи: початокі кінецьбудь-які числові вирази Результат: новий рядок

Метод slice об'єкта, від позиції початокдо позиції кінецьне включаючи її. Якщо кінець початокі до кінця вихідного рядка.

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

Результатом є рядкове значення, а чи не рядковий об'єкт. Наприклад, оператор document.write("ABCDEF".slice(2,-1)) виведе на екран браузера рядок CDE .

Метод small

Синтаксис : об'єкт.small() Результат: строкове значення

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

Метод split

Синтаксис : об'єкт.split( роздільник [,число]?) Аргументи: роздільник| рядковий або регулярний вираз числоЧисельний вираз Результат: масив рядків (об'єкт Array)

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

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

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

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

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

Метод strike

Синтаксис : об'єкт.strike() Результат: строкове значення

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

Метод sub

Синтаксис : об'єкт.sub() Результат: строкове значення

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

Метод substr

Синтаксис : об'єкт.substr( позиція [,довжина]?) Аргументи: позиціяі довжиначислові вирази Результат: строкове значення

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

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

Примітка. Якщо позиціянегативна, то Internet Explorerпомилково замінює її на 0, тому з метою сумісності цей варіант використовувати не слід.

Var src = "abcdef"; var s1 = src.substr(1, 3); // "bcd" var s2 = src.substr(1); // "bcdef" var s3 = src.substr(-1); // "f", але в MSIE: "abcdef"

Метод substring

Синтаксис : об'єкт.substring( початок [,кінець]) Аргументи: початокі кінецьчислові вирази Результат: строкове значення

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

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

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

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() Результат: строкове значення

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

Метод доLocaleLowerCase

Синтаксис : об'єкт.toLocaleLowerCase() Результат: новий рядок

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

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

Метод доLocaleUpperCase

Синтаксис : об'єкт.toLocaleUpperCase() Результат: новий рядок

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

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

Метод доLowerCase

Синтаксис : об'єкт.toLowerCase() Результат: новий рядок

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

Рядок – це послідовність з одного або декількох символів, яка може містити літери, числа та інші символи. 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та методи роботи з ними.

Рядки - це просто групи символів, такі як JavaScript, Hello world! », «http://www.quirksmode.org» або навіть «14». Для програмування на JavaScript Вам необхідно знати, що таке рядки і як з ними працювати, тому що використовувати їх доведеться дуже часто. Багато речей, таких як URL-сторінки, значення CSS-Параметрів і елементів введення форм - все є рядками.

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

Основи роботи з рядками

Давайте розглянемо основи роботи з рядками JavaScript.

Використання лапок

Коли Ви оголошуєте рядки у JavaScriptабо працюєте з ними, завжди укладайте їх в одинарні або подвійні лапки. Цим Ви пояснюєте браузеру, що він має справу з рядком. Не змішуйте використання лапок у коді, якщо Ви почали рядок з одинарної лапки, а закінчили подвійний, JavaScript не зрозуміє, що Ви мали на увазі. Як правило, я використовую одинарні лапки для роботи з рядками, тому що подвійні лапки я вирішив використовувати для HTML, а одинарні - для JavaScript. Звичайно, Ви можете робити все по-іншому, але я раджу вам вигадати подібне правило для себе.

Давайте представимо два рядки, які ми будемо використовувати протягом усієї статті:

Var a = "Hello world!"; var b = "I am a student.";

Зараз ми оголосили дві змінні, «a» і «b», і надали їм рядкові значення. Після цього ми можемо з ними працювати, але спочатку вирішимо одну проблему: скажімо, я написав:

Var b = "I"m a student.";

Рядок містить у собі зайву одинарну лапку, і JavaScript думає, що рядок закінчено і виводить повідомлення про помилку, не розуміючи, що слідує далі. Тому Вам потрібно екранувати лапку, повідомляючи браузеру, що її слід розглядати як символ, а чи не як закінчення рядка. Це здійснюється за допомогою «зворотного слішу» перед лапкою:

Var b = "I"m a student.";

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

Var b = "I"m a "student".";

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

Вбудовані функції

Після визначення рядків можна розпочати їх використання. Наприклад, Ви можете з'єднати один рядок з іншим, або взяти з рядка "b" підрядок, що складається з другого-четвертого символів і вставити їх у середину рядка "a", або визначити який символ коштує дванадцятим в "a", скільки символів в "b", чи є в них буква " q» і т.д.

Для цього можна використовувати вбудовані функції, які JavaScript визначає для кожного рядка. Одна з них – «length» – повертає довжину рядка. Тобто якщо Ви хочете обчислити довжину Hello world!, напишіть:

Var c = "Hello world!".

Раніше ми надали цей рядок змінної «а». Таким чином, Ви зробили змінну "a" рядком, тому до неї теж застосовна функція "length", і наступна операція дасть такий же результат:

Var c = a.length;

Запам'ятайте, що Ви можете використовувати "length" для будь-якого рядка - це вбудована функція. Ви можете обчислити довжину будь-якого рядка, наприклад: "location.href" або "document.title" або оголошеної Вами.

Нижче наведено список поширених вбудованих методів і властивостей.

Рядки та числа

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

Var c = a + 12;

У деяких мовах програмування обробка такого рядка призведе до помилки. Все ж таки «a» - це рядок, а «12» - число. Однак JavaScript намагається вирішити проблему, припускаючи, що «12» теж рядок. Таким чином "с" приймає значення "Hello world!12". Значить, якщо Ви використовуєте «+» з рядком і числом, JavaScript намагається зробити з рядка. Якщо ж Ви застосовуєте математичні операціїдо рядка, JavaScript намагається перетворити їх у число. За відсутності можливості переведення рядка в число (наприклад, через наявність у ній букв), JavaScript повертає NaN - "Not a Number - не є числом".

Нарешті, JavaScript немає різниці між цілими величинами і числами з плаваючою точкою.

Число → рядок

Для перетворення числа в рядоквведіть:

Var c = (16 * 24) / 49 + 12; d = c.toString();

Після цього Ви можете застосовувати до d всі строкові методи, а c все ще містить число.

Рядок → число

Якщо Ви хочете перетворити рядок на число, спочатку переконайтеся, що він складається лише із символів 0—9 . Для цього я просто множу рядок на 1 .

Var c = "1234"; d = c*1;

Оскільки множення здійснюється тільки з числами, JavaScript перетворює рядок на число, якщо це можливо. В іншому випадку, результат - NaN.

Зауважимо, якщо написати:

Var c = "1234"; d = c + 0;

Результатом буде "12340", тому що JavaScript використовує "+" для з'єднання рядків, а не їх складання.

Строкові властивості та методи

То що ми можемо робити з рядками? Об'єднання – це особливий випадокале всі інші команди (методи) можуть використовуватися з будь-яким рядком за допомогою конструкції:

Ім'я_рядки.метод();

Список вбудованих методів JavaScript для роботи з рядками

Конкатенація - об'єднання рядків

По-перше, Ви можете об'єднати рядки, склавши їх разом, ось так:

Document.write(a + b);

в результаті вийде: Hello world! I am a student. ». Але, звичайно, Ви хочете, щоб між пропозиціями був пробіл. Для цього запишемо код так:

Document.write(a + " " + b);

Так ми з'єднаємо три рядки: "а", """ (один пробіл) і "b", в результаті отримавши: "Hello world! I am a student. »

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

Document.write (a + 3 * 3 + b);

Зараз ми з'єднуємо рядок «а», потім результат виразу «3 * 3», що розглядається як рядок, і «b», отримуючи: «Hello world!9 I am a student. »

При використанні додавання потрібно бути уважним. Команда

Document.write (a + 3 + 3 + b);

з'єднує 4 рядки: "а", "3", "3" і "b", тому що "+" в даному випадкуозначає «з'єднати рядки», а не «скласти» і в результаті: Hello world!33 I am a student. ». Якщо Ви бажаєте скласти 3 та 3 перед створенням рядка, використовуйте дужки.

Document.write (a + (3 + 3) + b);

Даний вираз поєднує рядок «а», результат виразу «3 + 3» і «b», в результаті: «Hello world!6 I am a student. ».

indexOf

Один з найбільш широко використовуваних інтегрованих способів це «indexOf». Кожен символ має свій індекс, що містить номер його позиції у рядку. Зауважимо, що індекс першого символу - 0, другого - 1 і т. д. Таким чином, індекс символу "w" у терміні "а" - 6 .

Використовуючи «indexOf», ми можемо вивести індекс символу. Напишіть « .indexOf(" ") після назви рядка і вставте шуканий символ між лапками. Наприклад:

Var a = "Hello world!"; document.write(a.indexOf("w"));

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

Document.write(a.indexOf("o"));

поверне 4 , тому що це індекс першої «o» у рядку.

Ви також можете знайти комбінацію символів. (Звичайно, це теж рядок, але, щоб уникнути плутанини, я не називатиму її так). "indexOf" повертає позицію першого символу комбінації. Наприклад:

Document.write(a.indexOf("o w"));

теж поверне 4 тому, що це індекс «o».

Більш того, можливий пошук символу після певного індексу. Якщо Ви введете

Document.write(a.indexOf("o", 5));

то отримаєте індекс першої «o», що йде за символом з індексом 5 (це пробіл), тобто результат буде - 7 .

Якщо символ або комбінація не зустрічається в рядку, "indexOf" поверне "-1". Це, по суті, найпопулярніше застосування indexOf: перевірка існування певної комбінації символів. Воно є ядром скрипта, що визначає браузер. Для визначення IE Ви берете рядок:

Navigator.userAgent;

і перевіряєте, чи містить вона «MSIE»:

If(navigator.userAgent.indexOf("MSIE") != -1) ( // Будь-які дії з Internet Explorer )

Якщо індекс "MSIE" - не "-1" (якщо "MSIE" зустрічається десь у рядку), то поточний браузер- IE.

lastIndexOf

Також існує метод «lastIndexOf», який повертає останнє входження символу чи комбінації. Він діє протилежно "indexOf". Команда

Var b = "I am a student."; document.write(b.lastIndexOf("t"));

поверне 13 , тому що це індекс останньої t у рядку.

charAt

Метод «charAt» повертає символ, що стоїть на цій позиції. Наприклад, коли Ви вводите

Var b = "I am a student."; document.write(b.charAt(5));

в результаті виходить «a», оскільки це символ на шостій позиції (пам'ятайте, що індекс першого символу починається з 0).

length

Метод "length" повертає довжину рядка.

Var b = "I am a student."; document.write(b.length);

поверне «15». Довжина рядка на 1 більша, ніж індекс останнього символу.

split

split - це спеціальний метод, що дозволяє розділити рядок по певним символам. Використовується, коли результат необхідно заносити до масиву, а не до простої змінної. Давайте розділимо "b" за пробілами:

Var b = "I am a student." var temp = новий Array(); temp = b.split(" ");

Тепер рядок розбитий на 4 підрядки, які поміщаються в масив temp. Самі прогалини зникли.

Temp = "I"; temp = "am"; temp = "a"; temp="student";

Метод substring використовується для виділення частини рядка. Синтаксис методу: ". substring (перший_індекс, останній_індекс)". Наприклад:

Var a = "Hello world!"; document.write(a.substring(4, 8));

поверне "o wo", від першої "o" (індекс 4) до другої (індекс 7). Зауважте, що «r» (індекс 8) не є частиною підрядка.

Також можна написати:

Var a = "Hello world!"; document.write(a.substring(4));

Це дасть цілий підряд «o world! », починаючи від символу з індексом 4 і до кінця рядка.

substr

Також є метод "substr", який працює трохи по-іншому. Як другий аргумент він використовує не номер індексу, а кількість символів. Тобто

Document.write(a.substr(4, 8));

повертає 8 символів, починаючи від символу з індексом 4 ("o"), тобто в результаті отримуємо: "o world!" »

доLowerCase і toUpperCase

Нарешті, 2 методи, які іноді можуть стати Вам у нагоді: «toLowerCase» переводить весь рядок у нижній регістр, а «toUpperCase» — у верхній.

Var b = "I am a student."; document.write(b.toUpperCase());

В результаті отримаємо "I AM A STUDENT". ».