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

Умение работать со строковыми переменными в 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, может не поддерживаться устаревшими браузерами.