StartsWith в JS (JavaScript): топ-5 альтернатив

При работе со строками может потребоваться альтернатива методу startsWith в JS, которая способна обрабатывать более сложные сценарии. Это касается таких случаев, как, например, проверка, начинается ли строка с определённого шаблона, такого как префикс, подстрока или регулярное выражение. Встроенный в JavaScript метод startsWith() позволяет проверять только точное совпадение префиксов, чего в некоторых случаях может быть недостаточно.

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

1. Синтаксис и параметры метода.
2. Как проверить, начинается ли строка с подстроки.
3. Альтернативные методы startsWith().
4. Метод startsWith() без учёта регистра.
5. Как использовать startsWith() в старых браузерах.

Базовое понятие метода startsWith

Этот метод определяет, начинается ли строка с определённой подстроки, и возвращает true, если это так. В противном случае результатом будет false. Стоит отметить, что он чувствителен к регистру.

string.startsWith(searchString, position);

Синтаксис метода startsWith:

• string: Строка для поиска;
• searchString: Символ или строка для поиска.
• position: Указывает, с чего должен начинаться поиск. Если позиция проигнорирована, поиск будет осуществляться с позиции 0 (необязательный параметр).

Как использовать метод startsWith в JS

Чтобы использовать этот метод достаточно просто передать в него параметр searchString и указать строку для поиска. Чтобы запустить его с определённого индекса, можно передать параметр position. Например:

let inputString = 'Hello JavaScript';
let startsWithHello = inputString.startsWith('Hello');
console.log(startsWithHello); 
// Результат: true

В приведённом выше примере мы проверяем, начинается ли текст со строки «Hello». В этом примере входная строка «Hello JavaScript» начинается с «Hello», поэтому метод startsWith вернёт true. Например:

let inputString = 'Hello JavaScript';
let startsWithJs = inputString.startsWith('JavaScript', 6);
console.log(startsWithJs); 
// Результат: true

Что касается других параметров, можно также указать начальную позицию. В этом примере мы начинаем поиск с позиции 6. Это означает, что мы проверяем, начитается ли слово «JavaScript» с шестой или более дальней позиции (индекса).

Существует идентичный метод, противоположный методу startsWith(). Чтобы проверить, заканчивается ли строка определённой подстрокой или символом, применяется метод endsWith() в JavaScript.

Альтернативные методы startsWith()

Для проверки, начинается ли строка с подстроки, могут использовать и другие методы в JavaScript помимо startsWith(). Например, методы indexOf() и lastIndexOf() возвращают 0, когда находят подстроку в начале строки. Аналогично, методы slice() и substring() возвращает true, когда часть, которую они извлекают, совпадает с подстрокой.

Ниже мы рассмотрим пять различных альтернативных методов.

Метод indexOf()

Этот метод возвращает позицию первого вхождения указанного значения в строке. Он возвращает -1, когда искомое значение отсутствует в строке. Если же искомое значение находится в начале строки, indexOf() возвращает 0.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.indexOf(searchText) === 0) {
  console.log('String starts with "Hello".')
}
// Результат: "String starts with "Hello"."

Метод lastIndexOf()

Он возвращает последнее вхождение подстроки в строке. Если метод lastIndexOf() возвращает 0, то строка начинается с указанной подстроки. Начальный индекс можно установить равным 0, чтобы поиск начинался с первого символа строки.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.lastIndexOf(searchText, 0) === 0) {
  console.log('String starts with "Hello".')
}
// Результат: "String starts with "Hello"."

Метод match()

Выполняет поиск заданной подстроки в строке и возвращает его. При отсутствии значения результатом будет null.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.match(searchText) && inputString.match(searchText).length > 0) {
  console.log('String starts with "Hello".')
}
// Результат: "String starts with "Hello"."

Метод slice()

Извлекает часть строки и возвращает новую строку. Метод принимает два параметра: начальный и конечной индекс.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.slice(0, searchText.length) === searchText) {
  console.log(`String starts with "${searchText}"`)
}
// Результат: "Input string starts with 'Hello'"

Метод substring()

Извлекает часть строки и возвращает её в виде новой строки. Он принимает два параметра: начальный индекс (обязательный) и конечный индекс (необязательный) искомой подстроки.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.substring(0, searchText.length) === searchText) {
  console.log(`String starts with "${searchText}"`)
}
// Результат: "Input string starts with 'Hello'"

Эффективность методов альтернативных startsWith()

Метод startsWith() является наиболее эффективным и простым способом проверить, начинается ли строка с определённой подстроки. Другие альтернативные методы работают хуже с точки зрения производительности.

Метод startsWith() может обрабатывать 157,687 операции в секунду, в то время как другие методы отстают:

Использование startsWith в JS в реальных ситуациях

Ниже приведены несколько реальных примеров того, как использовать этот метод.

Проверка номера телефона на начало с кода страны

При вводе данных пользователем часто необходимо проверить, начинается ли строка с определённого символа или подстроки. Например, предположим, речь идёт о создании формы, в которой пользователи могут вводить свой номер телефона. Обязательным условием является его начало с кода страны 7.

Можно использовать метод startsWith(), чтобы проверить это условие:

<span class="token keyword">let</span> phoneNumber <span class="token operator">=</span> '<span class="token string">7-999-999-9999'</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>phoneNumber<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">('</span><span class="token string">1-'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">('</span><span class="token string">Valid phone number'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">('</span><span class="token string">Invalid phone number'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Результат: 'Valid phone number'</span>

Проверка URL

При работе с URL-адресами важно проверять, начинаются ли они с определённого протокола, такого как http:// или https://. В этом случае поможет метод метод startsWith().

// Проверка, является ли URL-адрес безопасным, небезопасным или недопустимым
let url = 'https://www.rajamsr.com';

if (url.startsWith('http://')) {
  console.log(`Insecure URL ${url}`);
} else if (url.startsWith('https://')) {
  console.log(`Secure URL ${url}`);
} else {
  console.log(`Invalid URL ${url}`);
}
// Результат: 'Secure URL https://www.rajamsr.com'

Фильтрация элементов массива с помощью startsWith в JS

Это типичный сценарий, когда в массиве надо отфильтровать элементы в зависимости от того, начинаются ли они с определённого символа или строки.

В следующем примере, чтобы проверить, начинается ли строка с «J», мы можем использовать метод filter() вместе с startsWith():

let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
let filteredMonths = months.filter(m => m.startsWith('J'));
console.log(filteredMonths); 

// Результат: ['Jan', 'Jun']

Форматирование URL-адреса с помощью startsWith в JS

В следующем примере кода метод startsWith() используется для проверки того, начинается ли URL-адрес с https. Если нет, то добавляется протокол https:// перед URL-адресом. Например:

let urls = ['https://www.google.com', 'www.bing.com'];
let formattedUrls = urls.map(url => {
  return (url.startsWith('https://')) ? url : `https://${url}`;
});

console.log(formattedUrls);

// Результат: ['https://www.google.com', 'https://www.bing.com']

Форматирование пути к файлу

JavaScript позволяет точно контролировать форматирование текста внутри строки. В некоторых случаях может потребоваться объединить базовую директорию и путь для создания полного пути. Без startsWith() приведённый ниже код в некоторых случаях приведёт к появлению двойной обратной косой черты или отсутствию разделителя пути. Эта проверка особенно важна, когда мы получаем входные данные от других методов или от пользователей.

Метод startsWith() позволяет справиться с этой задачей:

let base = 'C:\\Softwares';
let dir = 'JavaScript'

if (dir.startsWith('\\')) {
  console.log(`${base}${dir}`);
}  else {
  console.log(`${base}\\${dir}`);
}
// Результат: 'C:\Softwares\JavaScript'

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

Иногда, чтобы проверить, начинается ли строка с определённой подстроки, приходится использовать метод startsWith() с несколькими значениями. Например, чтобы убедиться, что URL начинается с http или https, можно объединить два метода startsWith() с логическим оператором OR (||).

let url = 'https://www.rajamsr.com';

if (url.startsWith('http://') || url.startsWith('https://')) {
  console.log(`Valid URL ${url}`);
}
else {
  console.log('Invalid URL format.')
}

// Результат: 'Valid URL https://www.rajamsr.com'

Использование startsWith в JS без учёта регистра

Между прочим, этот метод чувствителен к регистру. В некоторых случаях же возникает необходимость проверки, начинается ли строка с определённой подстроки, независимо от регистра.

Стоит отметить, что в этом случае необходимо преобразовать как строку ввода, так и строку поиска в строчные или прописные буквы перед вызовом метода startsWith(). Например:

const startsWithIgnoreCase = (inputString, searchString) =>
{
  const loweredInputString = inputString.toLocaleLowerCase();
  return loweredInputString.startsWith(searchString.toLocaleLowerCase())
}

console.log(startsWithIgnoreCase('Hello, JavaScript', 'Hello')); 
// Результат: true

console.log(startsWithIgnoreCase('HELLO, JAVASCRIPT', 'hello'));
// Результат: true

Функция startsWithIgnoreCase() проверяет, начинается ли строка с определённой подстроки. Она не учитывает регистр. Сначала она делает все символы в строке и подстроке строчными. Затем использует встроенный метод для их сравнения.

Читайте также: Как очистить массив в JavaScript.

Как использовать startsWith в JS в старых браузерах

Метод startsWith() был представлен в ECMAScript 6 и поддерживается всеми современными браузерами. Однако, если всё же необходимо его реализация для Internet Explorer потребуется полифилл (polyfill). Например:

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(searchString, position) {
    position = position || 0;
    return this.substr(position, searchString.length) === searchString;
  };
}

Заключение

Так или иначе, метод startsWith() в JS является удобным при необходимо проверки строк и манипулирования ими. Благодаря простому синтаксису и множеству вариантов использования он обеспечивает удобный и эффективный способ справиться с этой задачей.