Строки необходимы при работе с текстовыми и типографическими элементами на веб-странице. В этой статье познакомимся с основными и нестандартными методами для работы со строками в JS.

Строки — это последовательность символов в языке JavaScript. Например:

Пример строк в  Java Script

         const a = 'lorem ipsum'; var b = "съешь ещё этих мягких французских булок, да выпей чаю";      

Здесь мы задали переменную a и присвоили ей текстовое значение lorem ipsum, а переменной b присвоили значение съешь ещё этих мягких французских булок, да выпей чаю.

Кавычки

Если вы хотите задать строку, то нужно использовать одинарные или двойные кавычки. Возьмем код из предыдущего примера:

Пример использования одинарных и двойных кавычек

         const a = 'lorem ipsum';//одинарные кавычки var b = "съешь ещё этих мягких французских булок, да выпей чаю";//двойные кавычки      

Вместо кавычек из примера можно использовать обратные кавычки. Например:

Пример использования обратных кавычек

         var b = `съешь ещё этих мягких французских булок, да выпей чаю`;//обратные кавычки      

У обратных кавычек есть особенности:

1. В них можно оборачивать выражение типа ${}.
2. Выражения в них можно записывать на нескольких строках кода.
3. В них можно задавать функцию вида func `string`.

Если в строке есть кавычки, то их экранируют с помощью слеша. Это делают для того, чтобы при выводе кавычки были частью строки.

В одинарных кавычках экранируют одинарные кавычки. В двойных кавычках экранируют двойные кавычки. Символ слеша тоже экранируется.

Например:

Пример использования слеша для экранирования кавычек

         var str = "I'm a JavaScript "programmer" "; alert( str ); // I'm a JavaScript "programmer" var str = ' символ \ '; alert( str ); // символ       

Спецсимволы

Спецсимволы начинаются с обратного слеша – . И каждый имеет свое предназначение. Рассмотрим их.

Спецсимвол	Описание
n	Перевод строки
‘, «	Кавычки
t	Табуляция
xXX	Символ в Юникоде, например: u00A9 — то же самое, что ©
uXXXX	Символ в UTF-8, например: u00A9 — то же самое, что ©

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу

Длина строки length

Вы можете получить длину строки с помощью свойства length.

Например:

Пример использования свойства length в Java Script

         var str = 'lorem ipsum'.length;// получается 11, знак пробела тоже считается     

Обратите внимание, что после length нет скобок. Скобки используют при работе с числовыми значениями.

Доступ к символам

Получить символ из определенной позиции в строке можно с помощью квадратных скобок [ ]:

Пример доступа к символам в Java Script

         var str = 'lorem ipsum'; console.log(str[0]);//выведет l console.log(str[100]);//выведет undefined, потому что в позиции 100 нет символов      

Строку можно перебрать посимвольно с помощью цикла for…of, который мы используем для перебора массива:

Пример доступа к символам с помощью цикла for…of в  Java Script

         for (let char of "lorem ipsum") {           console.log(char); };      

Строки неизменяемы

Если строку создали, то её нельзя изменить:

Пример невозможности изменения символов в строках

         let str = 'lorem ipsum'; str[0] = 'L'; // команда не работает, потому что мы попытались на место первого символа вставит другой console.log( str[0] ); // l      

Чтобы изменить строку, можно создать новую строку и присоединить к ней другую строку или её часть:

Пример создания новой строки с изменением её части

         let str = 'ok';// Имеем строку str = 'O' + str[1]; // Создаем новую строку `O` и присоединяем к ней второй символ из строки str  console.log( str ); // Ok      

Поиск подстроки

Подстрока – это часть строки. Например, в строке 'lorem ipsum' можно найти две подстроки: 'lorem' и 'ipsum', а можно найти две подстроки 'm'.

Рассмотрим способы поиска.

Метод str.indexOf

Ищет подстроку и ее позицию. Синтаксис такой: str.indexOf(substr, pos). Substr — подстрока, pos — позиция строки.

Pos принимает значение позиции, на которой находится подстрока или значение — 1, если подстроки нет:

Пример поиска подстроки методом str.IndexOf в Java Script

         let str = 'lorem ipsum'; console.log(str.indexOf('sum'));//начинается с позиции 8 console.log(str.indexOf('Sum'));//— 1 console.log(str.indexOf('m'));//на позиции 4      

Чтобы найти все подстроки 'm' в строке 'lorem ipsum', используют цикл:

Поиск подстроки с помощью метода str.IndexOf в JavaScript

         let str = 'lorem ipsum'; let target = 'm'; // цель поиска let pos = 0;    while (true) {          let foundPos = str.indexOf(target, pos);           if (foundPos == — 1) break;           alert( `Искомая подстрока на позиции: ${foundPos}` );           pos = foundPos + 1; // продолжаем со следующей позиции         };      

Методы includes, startsWith, endsWith

Метод includes возвращает true, если подстрока есть и false, если подстроки нет:

Пример поиска подстроки методом includes в Java Script

         let str = 'lorem ipsum'; console.log( str.includes("m") ); // true console.log( str.includes("v") ); // false      

Методы startsWith и endsWith определяют, начинается или и заканчивается строка определённой подстрокой:

Пример поиска подстроки методами startsWith и endsWith

         let str = 'lorem ipsum'; console.log( str.startsWith("lo") ); // true console.log( str.endsWith("un") ); // false      

Получение подстроки

Чтобы получить подстроку, можно использовать 3 метода: substring, substr и slice.

Метод substring используют, чтобы получить подстроку. Её конец и начало определяются индексами, которые указывают в скобках.

Синтаксис такой: str.substring(start [, end]), где start — начальное значение строки, end — конечное значение строки и в подстроку не включается.

Например:

Пример получения подстроки методом substring в Java Script

         let str = 'lorem ipsum'; console.log( str.substring(0, 4) );\lore 0 —  l, 1 —  o, 2 —  r, 3 —  e, 4 —  хоть и обозначается в коде, но значение строки не возвращает.      

В этом методе начало строки можно задать большим числом, нежели конец строки. Тогда метод сам поменяет числа местами и вернет правильное значение подстроки:

Пример получения подстроки методом substring в Java Script

         let str = 'lorem ipsum'; // для substring эти два примера — одинаковы console.log( str.substring(0, 4) ); // lore первое и последнее значение может быть указан в любом порядке console.log( str.substring(4, 0) ); // lore первое и последнее значение может быть указан в любом порядке      

Метод substr возвращает подстроку от начального значения — start, до определенной длины length. Синтаксис такой: str.substr(start, length). Например:

Пример получения подстроки методом substr в Java Script

         let str = 'lorem ipsum'; console.log( str.substr(2, 5) ); // rem i      

Значение start может быть отрицательными. Тогда позиция подстроки определяется справа. Например:

Пример получения подстроки методом substr в Java Script

         let str = 'lorem ipsum'; console.log( str.substr(-4, 3) ); // psu      

Метод slice используют как метод substring. Начальное и конечное значение подстроки задается точно также. Синтаксис такой: str.slice(start,end), end — не включается. Например:

Пример получения подстроки методом slice в Java Script

         let str = 'lorem ipsum'; console.log( str.slice(0, 4) ); // lore console.log( str.substring(1) ); // orem ipsum      

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

Когда в качестве аргументов подстроки передаются отрицательные числа, то порядок элементов строки отсчитывается справа налево:

Пример получения подстроки методом slice в Java Script

         let str = 'lorem ipsum'; console.log( str.slice(-4, -1) ); // psu      

Сравнение строк

Строки сравниваются посимвольно в алфавитном порядке. Алгоритм сравнения двух строк такой:

1. Сравнить первые символы строк.
2. Если первый символ первой строки больше (меньше), чем первый символ второй, то первая строка больше (меньше) второй. Сравнение завершено.
3. Если первые символы равны, сравниваем вторые символы строк.
4. Сравнение продолжается, пока не закончится одна из строк.
5. Если обе строки заканчиваются одновременно, то они равны. Иначе большей считается более длинная строка.

Например:

Сравнение строк в Java Script

         alert( 'Я' > 'А' ); // true alert( 'Коты' > 'Кода' ); // true       

Сравнение 'Я' > 'А' завершится на первом шаге.

Строки 'Коты' и 'Кода' будут сравниваться посимвольно:

1. 'К' равна 'К'.
2. 'о' равна 'о'.
3. 'т' больше, чем 'д'.

Сравнение заканчивается. Первая строка больше.

В некоторых случаях удобно сравнивать не посимвольно, а в кодировке UTF-8. Для этого используют метод codePointAt. Синтаксис такой: str.codePointAt(pos). Например, символы 'A' и 'a' будут иметь разное значение в UTF-8.

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

         alert( "a".codePointAt(0) ); // 97 alert( "A".codePointAt(0) ); // 65 alert(`a`>`A`);//true       

Метод fromCodePoint создает символ по его коду. Синтаксис такой: String.fromCodePoint(code). Например:

Пример создания символа методом fromCodePoint

         alert( String.fromCodePoint(97) ); // a      

Правильное сравнение

При правильном сравнении можно сравнивать строки из разных языков. Например: 'Österreich' — немецкий языки 'Zealand' — английский язык.

Для этого используют метод localeCompare. Этот метод возвращает:

1. Отрицательное число, если str1 меньше str2.
2. Положительное число, если str1 больше str2.
3. 0, если строки равны.

Например:

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

         alert( 'Österreich'.localeCompare('Zealand') ); // -1, 'Österreich' —  str1, 'Zealand' —  str2 alert('Zealand'.localeCompare('Österreich') ); // 1,  'Zealand' —  str1, 'Österreich' —  str2 alert('Österreich'.localeCompare('Österreich') ); // 0      

Как всё устроено, Юникод

Суррогатные пары

Буквы в европейских языках представлены в виде 2-х байтовых символов. Всего в таком виде можно представить 65536 комбинаций символов. Поэтому редкие символы кодируются не одним символом, а парой символов. Помните, что смайлик мы можем сделать с помощью двух символов: двоеточия и скобки? 🙂

Такие символы называют суррогатной парой и их длина равна 2.

Например:

Суррогатные пары в Java Script

         alert( '😂'.length );//2 //Части суррогатной пары не имеют смысла, поэтому они будут определяться, как неизвестные символы.  alert( '😂'[0] ); // � alert( '😂'[1] ); // �      

Суррогатные пары можно обнаружить по их кодам. В диапазоне 0xd800..0xdbff — можно обнаружить первый символ, в диапазоне 0xdc00..0xdfff — второй символ.

Например:

Пример получения кода суррогатной пары в Java Script

         alert( '😂'.charCodeAt(0).toString(16) ); //получить код со значением 0 в 16-тиричной системе: d83d alert( '😂'.charCodeAt(1).toString(16) ); //получить код со значением 0 в 16-тиричной системе: de02      

Диакритические знаки и нормализация

В некоторых языках: немецком, шведском, венгерском, турецком есть диакритические символы. Например буква `a` служит основой для диакритических символов àáâäãåā.

Чтобы работать с диакритическими знаками в языке JavaScript, используют специальные символы. Например, чтобы добавить сверху буквы `a` точку, используют символ u0307.

Пример получения диакритического знака в Java Script

         alert( 'Su0307' );ȧ     

Чтобы сравнить диакритические знаки используют метод normalize(). Синтаксис такой: str.normalize():

Пример сравнения диакритических знаков с помощью метода normalize() в Java Script

         alert( "Su0307u0323".normalize() == "Su0323u0307".normalize() );//true      

Если этот метод не использовать, то при сравнении одинаковых символов мы увидим false:

Пример сравнения диакритических знаков без метода normalize() в Java Script

         alert( "Su0307u0323" == "Su0323u0307" );//false      

Нестандартные методы объекта String

Метод anchor

Создает закладку с name и заключает ее в теги <a>...</a>:

Пример использования метода anchor в Java Script

         let str = 'lorem ipsum'.anchor('Закладка'); alert(str);      

Метод big

Заключает строку в теги <big>...</big>:

Пример использования метода big в Java Script

         let str = 'lorem ipsum'.big(); document.write(str);      

Метод blink

Заключает строку в теги <blink>…</blink>. Строка между этими тегами мигает. Метод поддерживается браузерами Netscape и WebTV. Например:

Пример использования метода blink в Java Script

         let str = 'lorem ipsum'.blink(); document.write(str);      

Метод bold

Заключает строку в теги <b>…</b>. Шрифт строки между ними становится жирным:

Пример использования метода bold в Java Script

         let str = 'lorem ipsum'.bold(); document.write(str);      

Метод charAt

Метод возвращает какой-либо символ строки из указанной позиции:

Пример использования метода  charAt в Java Script

         let str = 'lorem ipsum'.charAt(0);// l document.write(str);      

Метод charCodeAt

Метод возвращает код Юникода в определенной позиции:

Пример использования метода charCodeAt в Java Script

         et str = 'lorem ipsum'.charCodeAt(0);// Код символа `l` в позиции [0] в Юникоде —  это 108. document.write(str);      

Метод concat

Метод соединяет строки:

Пример использования метода concat в Java Script

         let str = 'lorem ipsum'; document.write(str.concat('dolor sit amet'));//lorem ipsum dolor sit amet      

Метод fixed

Метод заключает строку в теги <tt>…</tt>. Эти теги отображают строку телетайпным шрифтом:

Пример использования метода fixed в Java Script

         let str = 'lorem ipsum'.fixed(); document.write(str);      

Метод fontcolor

Метод помещает строку в тег <font color=цвет>…</font> и окрасит ее в любой цвет:

Пример использования метода fontcolor в Java Script

         let str = 'lorem ipsum'.fontcolor('green'); document.write(str);//строка 'lorem ipsum' стала зеленым цвета      

Метод fontsize

Метод помещает строку в тег <font size=`размер`>…</font> и задаст ее размер:

Пример использования метода fontsize в Java Script

         let str = 'lorem ipsum'.fontsize('20px'); document.write(str);//строка 'lorem ipsum' стала размером 20px      

Метод fromCharCode

Метод создает новую строку из символов по коду из Юникод:

Пример использования метода fromCharCode в Java Script

         let str = String.fromCharCode(108,111, 114, 101, 109, 32, 105, 112, 115, 117, 109);     document.write(str);//lorem ipsum       

Метод indexOf

Метод возвращает первую позицию подстроки:

Пример использования метода indexOf в Java Script

         let str = 'lorem ipsum'.indexOf('l'); document.write(str);//0      

Метод italics

Метод помещает строку в теги <i>...</i>:

Пример использования метода italics в Java Script

         let str = 'lorem ipsum'.italics(); document.write(str);//строка str выводится курсивом      

Метод lastIndexOf

Метод возвращает позицию указанной подстроки:

Пример использования метода lastIndexOf в Java Script

         let str = 'lorem ipsum'.lastIndexOf('ip'); document.write(str);//6 —  позиция, с которой начинается подстрока 'ip'      

Метод link

Метод помещает строку в теги <a href="uri">…</a>. Строка становится ссылкой:

Пример использования метода link в Java Script

         let str = 'lorem ipsum'.link('https://proglib.io/'); document.write(str);      

Метод localeCompare

Метод сравнивает две строки и возвращает:

1. -1 — строка меньше,
2. 1 — строка больше,
3. 0 — строки равны.

Например:

Пример использования метода localeCompare в Java Script

         let str1 = 'lorem ipsum'.localeCompare('lorem ipsum'); document.write(str1);//0  let str2 = 'lorem ipsum'.localeCompare('lorem ipsu'); document.write(str2);//1  let str3 = 'lorem ipsum'.localeCompare('lorem ipsum dolor sit amet'); document.write(str3);//-1      

Метод match

Метод сопоставляет строковое значение и значение метода. Возвращает совпадение строки и значение, которое указано в скобках:

Пример использования метода match в Java Script

         let str = 'lorem ipsum'.match('lor'); document.write(str);/ часть переменной srt 'lor' совпало со значением метода  match('lor').      

Метод replace

Метод сопоставляет выражение строки и меняет его на указанное:

Пример использования метода replace в Java Script

         let str = 'lorem ipsum'.replace('lor', 'dol'); document.write(str);//Метод нашел в строке подстроку 'lor', и заменил на  'dol', получилось —   dolem ipsum      

Метод search

Сопоставляет выражение в скобках и строку. В результате получается позиция первого элемента подстроки:

Пример использования метода search в Java Script

         let str = 'lorem ipsum'.search('or'); document.write(str);//1      

Метод small

Метод помещает строку в теги <small>...</small>:

Пример использования метода small в Java Script

         let str = 'lorem ipsum'.small(); document.write(str);//строка на экране будет выглядеть меньше      

Метод strike

Метод помещает строку в теги <strike>...</strike>:

Пример использования метода strike в Java Script

         let str = 'lorem ipsum'.strike(); document.write(str);      

Метод split

Метод разбивает строку на массив подстрок с помощью указанного разделителя:

Пример использования метода split в Java Script

         let str = 'lorem ipsum'.split(' '); document.write(str);//l,o,r,e,m, ,i,p,s,u,m      

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

Пример использования метода split в Java Script 

         et str = 'lorem ipsum'.split('', 3); document.write(str);//l,o,r —  метод разбил строку на символы с помощью запятой и вывел три знака      

Метод sub

Метод заключает строку в теги <sub>...</sub>:

Пример использования метода sub в Java Script 

         let str = 'lorem ipsum'.sub(); document.write(str);      

Метод sup

Метод заключает строку в теги <sup>...</sup>:

Пример использования метода sup в Java Script 

         let str = 'lorem ipsum'.sup(); document.write(str);      

Метод toLocaleLowerCase

Метод возвращает строчные буквы:

Пример использования метода toLocaleLowerCase в Java Script

         let str = 'LOREM IPSUM'.toLocaleLowerCase(); document.write(str);      

Метод toLocaleUpperCase

Метод возвращает прописные буквы:

Пример использования метода toLocaleUpperCase в Java Script

         let str = 'lorem ipsum'.toLocaleUpperCase(); document.write(str);//LOREM IPSUM      

Метод toLowerCase

Метод заменяет все буквы исходной строки на строчные:

Пример использования метода toLowerCase в Java Script

         let str = 'Lorem ipSum'.toLowerCase(); document.write(str);//lorem ipsum      

Метод toString

Метод возвращает исходное значение строки:

Пример использования метода toString в Java Script

         let str = 'Lorem ipSum'.toString(); document.write(str);//Lorem ipSum      

Метод toUpperCase

Метод меняет символы строки на прописные:

Пример использования метода toUpperCase в Java Script

         let str = 'Lorem ipSum'.toUpperCase(); document.write(str);//LOREM IPSUM      

Метод valueOf

Метод возвращает значение строки:

Пример использования метода valueOf в Java Script

         let str = 'Lorem ipSum'.valueOf(); document.write(str);//Lorem ipSum      

***

В этой статье мы:

• узнали, как задавать строку и искать в подстроках;
• как работать с Юникодом и что такое суррогатные пары;
• познакомились с основными и нестандартными методами для работы со строками.

Материалы по теме

• ☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры
• ☕ 5+5=? Преобразование значений в строку или число в JavaScript
• ☕ Распространенные алгоритмы и структуры данных в JavaScript: полезные алгоритмы для веб-разработки