☕ 40 основных и нестандартных методов для работы со строками в JavaScript

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

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

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 ); // символ \

Спецсимволы

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

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

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

Например:

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

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

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

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

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

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

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, если подстроки нет:

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', используют цикл:

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, если подстроки нет:

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

Методы 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 — конечное значение строки и в подстроку не включается.

Например:

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

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

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). Например:

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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.

Например:

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

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

Например:

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

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

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

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

alert( 'S\u0307' );ȧ

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

alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() );//true

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

alert( "S\u0307\u0323" == "S\u0323\u0307" );//false

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

Метод anchor

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

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

Метод big

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

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

Метод blink

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

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

Метод bold

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

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

Метод charAt

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

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

Метод charCodeAt

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

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

Метод concat

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

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

Метод fixed

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

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

Метод fontcolor

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

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

Метод fontsize

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

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

Метод fromCharCode

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

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

Метод indexOf

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

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

Метод italics

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

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

Метод lastIndexOf

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

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

Метод link

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

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

Метод localeCompare

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

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

Например:

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

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

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

Метод replace

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

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

Метод search

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

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

Метод small

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

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

Метод strike

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

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

Метод split

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

let str = 'lorem ipsum'.split(' ');
document.write(str);//lorem,ipsum

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

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

Метод sub

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

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

Метод sup

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

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

Метод toLocaleLowerCase

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

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

Метод toLocaleUpperCase

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

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

Метод toLowerCase

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

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

Метод toString

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

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

Метод toUpperCase

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

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

Метод valueOf

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

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

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

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

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

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