Работа со строками в JavaScript

Комментарии: 2

Умение работать со строковыми переменными в javascript является обязательным условием при написании даже небольших скриптов. Рассмотрим базовые операции на простых примерах.

Объединение

Рассмотрим основные аспекты, связанные с объединением строк и строковых переменных.

Стандартный способ:

let s1 = 'Hello';
let s2 = 'world';
let s3 = s1 + s2 + '!';
console.log(s3); // Hello world!

Вместо одинарных кавычек можно использовать двойные. Кроме этого, кавычки внутри строки можно экранировать обратным слешем.
```
let s1 = "It's string";
let s2 = 'It\'s string';
```
Применяется в JavaScript и ещё один тип кавычек — обратные. Их использование позволяет размещать переменные прямо внутри строки.
```
let s1 = 'Hello';
let s2 = 'world';
let s3 = `${s1} ${s2}!`;
console.log(s3); // Hello world!
```
Ещё один способ объединения — использовать функцию «concat».
```
let s1 = 'Hello';
let s2 = 'world';
let s3 = s1.concat(' ', s2, '!');
console.log(s3); // Hello world!
```
Здесь в переменную «s3», будет присваиваться значение переменной «s1», объедененное с пробелом, «s2» и восклицательным знаком. Важно, значение «s1» не изменится.

Подсчет символов

Для подсчета количества символов используйте метод «length».

let s = "It's string";
console.log(s.length); // 11

Проверка на тип и пустоту

Как проверить, содержит ли переменная строку.

let s = "it's string";

if (typeof s == 'string') {
    console.log('s Is string');
} else {
    console.log("s Isn't string");
}

Проверка на пустоту:

let s = '';

if (!s) {
    console.log('s Is empty');
} else {
    console.log("s Isn't empty");
}

Поиск в строке

Чтобы определить вхождение слова или символа в строку, используйте функцию «indexOf». Она возвращает позицию найденной подстроки или «-1», если ничего не найдено.
```
let s = 'Hello world!';

if (s.indexOf('world') != -1) {
    console.log('world Is found');
} else {
    console.log('world Isn\'t found');
}
```
Возможен поиск по регулярному выражению. Попробуем найти в строке число, хотя точно не знаем, есть оно или нет.
```
let s = 'Happy new 2020 year! Next year — 2021.';
let Regex = /(\d+)/g;
let year;

if (year = s.match(Regex)) { 
    console.log(year[0]); // 2020
    console.log(year[1]); // 2021
} else { 
    console.log('not found');
}
```
Переменная «Regex» содержит регулярное выражение, со специальным правилом для поиска. В данном примере конструкция «(\d+)» обозначает последовательность цифр. В качестве результата возвращается массив со всеми найденными элементами. Если убрать директиву «g», то в результат попадет только первый найденный элемент.

Регулярные выражения в js — это отдельная тема. Частично можете ознакомиться с ними из статьи по валидации полей.

Замены в строке

Простой способ замены слова в строке:
```
let s = 'Hello world world!';
let s_new = s.replace(' world', '');
console.log(s_new); // Hello world!
```
Недостаток: будет заменено только первое найденное совпадение.
Замена всех совпадений:
```
let s = 'Hello world world!';
let Regex = / world/gi;
let s_new = s.replace(Regex, '');
console.log(s_new); // Hello!
```
Флаг «g» указывает на то, что регулярное выражение должно проверять все возможные сопоставления. Директива «i» указывает на поиск без учета регистра. То есть, слово « World» тоже будет заменено.
Этот же способ применим для замены года. Регулярное выражение укажем сразу внутри функции.
```
let s = 'Happy new 2020 year!';
let s_new = s.replace(/(\d+)/, '2021');
console.log(s_new); // Happy new 2021 year!
```

Работа с подстроками

Рассмотрим функции для работы с подстроками.

slice(start, [end]) — возвращает символы, между конкретных позиций.
```
let s = '0123456789';
let s_new = s.slice(0, 4);
console.log(s_new); // 0123
```
Если второй параметр не указан, то вернет всё до конца строки.
substring(start, [end]) — работает аналогично. Отличие от «slice» в 2 моментах. Если стартовое значение больше конечного, то первая функция вернет пустую строку.
```
let s = '0123456789';
console.log(s.slice(6, 4)); // ''
console.log(s.substring(6, 4)); // 45
```
Ещё различие в подходе при неверных параметрах.
```
let s = '0123456789';
console.log(s.slice(-4, -2)); // 67
console.log(s.substring(-4, -2)); // ''
```
Функция «slice()» конвертирует отрицательные значения в положительные, отталкиваясь от длины строки, а «substring()» просто устанавливает их в ноль, поэтому возвращает пустую строку.
substr(start, [length]) — возвращает подстроку, начиная с определенной позиции и определенной длины.
```
let s = '0123456789';
let s_new = s.substr(4, 3);
console.log(s_new); // 456
```

Разбиение на массив

Преобразование строки в массив. В качестве параметра указывается разделитель, в нашем случае это пробел.
```
let s = 'Happy new 2020 year!';
let a = s.split(' ');
console.log(a); // ["Happy", "new", "2020", "year!"]
```

Обратная функция «join».

let a = ["Happy", "new", "2020", "year!"];
let s = a.join(' ');
console.log(a); // Happy new 2020 year!

В совокупности функции позволяют быстро конвертировать строку в массив, произвести с каждым элементом манипуляции и возвратить обратно строку. Например, вот как быстро можно обернуть каждый символ строки в тег span:

let s = 'Hello';
s = s.split("").map(el => `<span>${el}</span>`).join("");
console.log(s); // <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>

В примере используется синтаксис ECMAScript 6, может не поддерживаться устаревшими браузерами.