JavaScript Метод Substring
Этот пост о том, как эффективно использовать метод String.prototype.substring() в JavaScript. Мы рассмотрим несколько примеров, чтобы понять, как это работает, поиграем, чтобы понаблюдать за несколькими закономерностями и изучить причуды.
JavaScript substring() - это строковый метод, который обычно используется для извлечения и сохранения части строки. Во время извлечения исходная строка остается нетронутой, а целевая часть возвращается как новая строка.
String.prototype.substring() удобен для создания подстрок символов от точки к другой родительской строки. Подстрока может быть с начала, между указанными индексами или с конца.
В этом посте мы выполним некоторое упражнение с методом JS substring(), рассмотрев несколько примеров. Мы начнем с ознакомления с сигнатурой метода String.prototype.substring(), требуемым аргументом (startIndex), дополнительным аргументом (endIndex) и поймем, какие из них использовать, когда. Затем мы идем дальше и видим примеры извлечения ряда символов после начального индекса, символов из диапазона между двумя индексами, символов из начала и из хвоста. При этом мы подробно остановимся на нескольких шаблонах извлечения из родительской строки: а именно, на извлечении хвоста после первых n символов, на создании подстроки, состоящей из первых n символов, и на извлечении последних n символов.
Во второй половине поста мы обсудим некоторые нюансы, связанные со значениями startIndex и endIndex. В конце мы укажем, как JavaScript String.prototype.substring() сравнивается со String.prototype.slice(), а также с устаревшим методом String.prototype.substr().
Шаг за шагом мы рассмотрим следующие темы:
- Метод JavaScript
substring()
- Сигнатура метода
Array.prototype.substring()
- JavaScript
substring()только сstartIndex
- Извлекаем хвост после первых n символов - JavaScript
substring()
- JavaScript
String.prototype.substring()- Извлекаем подстроку между двумя точками
- Извлеките первые n символов - JavaScript
substring()
- Извлеките последние n символов с помощью
String.prototype.substring()
- Нюансы
startIndexиendIndexв JavaScriptsubstring()
- JavaScript
substring()с помощьюstartIndex > endIndex
- Javascript
substring()с отрицательнымиstartIndexиendIndex
- Сравнение
String.prototype.substring()
- JavaScript
substring()противslice()
- JavaScript
substring()противsubstr()
Метод JavaScript substring()
Array.prototype.substring() принимает два возможных аргумента: startIndex и endIndex. startIndex является обязательным, в то время как endIndex может быть передан для явного указания завершения извлечения.
Подпись метода Array.prototype.substring()
Мы можем вызвать substring() со следующими возможными сигнатурами:
substring(startIndex);
substring(startIndex, endIndex);startIndex представляет точку, с которой начинается извлечение подстроки. Значение в startIndex является включающим, т.е. оно включено в возвращаемую подстроку. Конечный индекс обозначает завершение извлечения. Однако значение в конечном индексе исключено. Это означает, что мы завершаем извлечение символа перед endIndex.
Давайте посмотрим на это в действии на нескольких примерах.
JavaScript substring() только с startIndex
Передав только startIndex в substring(), мы получим подстроку, которая начинается с startIndex и простирается до конца родительской строки:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
console.log(mnemonic.substring(14)); // "cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked."Как мы можем понять из приведенной выше строки, измельчение начинается с startIndex, и с этого момента мы получаем хвост.
Извлечь хвост после первых n символов - JavaScript substring()
Поскольку мы используем нулевой индекс для startIndex, первое число символов startIndex представлено индексом непосредственно перед startIndex. И поскольку значение в startIndex включено в извлеченный tail, возникает следующий шаблон, в котором при startIndex = n мы получаем tail после первых n символов в родительской строке:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// Extract characters after first 14
console.log(mnemonic.substring(14)); // "cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked."
// Extract tail after first 20
console.log(mnemonic.substring(20)); // "monkeys, and, zebras, in, large, cages, make, sure, padlocked."
// Extract tails after 29
console.log(mnemonic.substring(29)); // "and, zebras, in, large, cages, make, sure, padlocked."
// Extract after 72
console.log(mnemonic.substring(72)); // "padlocked."JavaScript String.prototype.substring() - Извлекает подстроку между двумя точками
Когда мы передаем как startIndex, так и endIndex, мы получаем подстроку символов в диапазоне startIndex <= str < endIndex:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
console.log(mnemonic.substring(14, 27)); // "cats, monkeys"Это означает, что теперь мы получаем подстроку, которая заканчивается перед конечным индексом.
Извлекаем первые n символов - JavaScript substring()
Когда нам нужна подстрока из начала родительской строки, startIndex должен быть равен 0:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
console.log(mnemonic.substring(0, 27)); // "Please send, cats, monkeys"При startIndex = 0 и endIndex = n мы получаем первые n символов из родительской строки:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// First 12 characters
console.log(mnemonic.substring(0, 12)); // "Please, send"
// First 18 characters
console.log(mnemonic.substring(0, 18)); // "Please, send, cats"
// First 27 characters
console.log(mnemonic.substring(0, 27)); // "Please, send, cats, monkeys"
// First 70 characters
console.log(mnemonic.substring(0, 70)); // "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure"Извлеките последние n символов, используя String.prototype.substring()
Мы можем получить последние n символов, используя длину вызывающего элемента в startIndex:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// Last 9 characters
console.log(mnemonic.substring(mnemonic.length - 9)); // "padlocked."
// Last 15 characters
console.log(mnemonic.substring(mnemonic.length - 15)); // "sure, padlocked."Способ, которым работает приведенный выше шаблон, заключается в том, что mnemonic.length устанавливает startIndex непосредственно за пределами родительской строки. Перемещение startIndex назад на -n перемещает запись извлечения в конец на n. И поскольку мы не передаем endIndex, извлечение продолжается до конца строки. Итак, мы получаем последние n символов.
Нюансы startIndex и endIndex в JavaScript substring()
Другие особенности использования substring() включают случаи, когда startIndex больше endIndex и когда любой из startIndex и endIndex или оба отрицательны. Давайте рассмотрим их один за другим.
JavaScript substring() с startIndex endIndex
Когда startIndex больше endIndex, JavaScript substring() меняет местами индексы для получения подстроки:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// Swaps to mnemonic.substring(0, 6)
console.log(mnemonic.substring(6, 0)); // "Please"Javascript substring() с отрицательным startIndex и endIndex
Отрицательное значение startIndex или endIndex устанавливает соответствующее значение равным 0:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// Same as mnemonic.substring(0, 6)
console.log(mnemonic.substring(-1, 6)); // "Please"
// Same as mnemonic.substring(0, 0)
console.log(mnemonic.substring(-1, -6)); // ""
// // Same as mnemonic.substring(12, 0)
console.log(mnemonic.substring(12, -6)); // "Please, send"В последнем приведенном выше вызове также задействован обмен между startIndex и endIndex, поскольку 12 > 0. Вызов эквивалентен mnemonic.substring(0, 12);.
Сравнение String.prototype.substring()
В этом разделе мы кратко обсудим, чем метод JavaScript substring() отличается от slice() и substr(), которые также являются аналогичными методами извлечения строк.
JavaScript substring() против slice()
String.prototype.substring() и String.prototype.slice() оба реализуют извлечение строки почти идентично. Однако в их реализациях есть некоторые тонкие различия.
Например, замена аргументов, которую мы видели выше в substring(), не выполняется в slice(), когда startIndex > endIndex:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// Swaps to mnemonic.substring(0, 6)
console.log(mnemonic.substring(6, 0)); // "Please"
// Doesn't swap. Returns empty string, meaning non-existent characters
console.log(mnemonic.slice(6, 0)); // ""С помощью функции slice() startIndex > endIndex возвращает пустую строку.
Еще одно отличие заключается в том, что значения startIndex и endIndex отрицательны. В общем, когда они отрицательные, slice() переносит startIndex и endIndex в конец, перемещаясь назад от последнего символа. И затем, если startIndex < endIndex, срез работает:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
// Zeroes and swaps to mnemonic.substring(0, 18)
console.log(mnemonic.substring(18, -12)); // "Please, send, cats"
// Doesn't swap, -12 finds index from tail. String is long enough, slicing works
console.log(mnemonic.slice(20, -12)); // "monkeys, and, zebras, in, large, cages, make, sure"
.........
console.log(mnemonic.substring(-12, 18)); // "Please, send, cats"
// Doesn't swap. -12 finds index from tail, but startIndex > endIndex. Returns non-existent string
console.log(mnemonic.slice(-12, 18)); // ""
.........
console.log(mnemonic.substring(-16, -12)); // ""
// Both startIndex and endIndex finds index from tail. startIndex < endIndex. Slicing works
console.log(mnemonic.slice(-16, -12)); // "sure"JavaScript substring() против substr()
JavaScript substr() также является еще одним методом извлечения подстрок из родительской строки. Однако это устаревший строковый метод, который принимает длину целевой подстроки вместо индекса для завершения извлечения.
Другими словами, с помощью substr() мы получаем указание длины подстроки:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
console.log(mnemonic.substring(10, 12)); // "nd"
// Gets 12 characters starting from startIndex onwards
console.log(mnemonic.substr(10, 12)); // "nd, cats, mo"Также, как и в случае с slice(), при отрицательном startIndex substr() отсчитывает в обратном порядке от последнего символа:
const mnemonic = "Please, send, cats, monkeys, and, zebras, in, large, cages, make, sure, padlocked.";
console.log(mnemonic.substring(-10, 12)); // "Please, send"
// startIndex wraps to 10 items from tail. Gets 10 characters from tail, doesn't have the other 2
console.log(mnemonic.substr(-10, 12)); // "padlocked."В этом случае выбираются только 10 символов, поскольку 2 из целевых 12 недоступны в последних 10 символах.
Заключение
В этом посте мы опробовали использование JavaScript substring() на нескольких базовых примерах. Сначала мы узнали, что substring() - это метод извлечения строки, который возвращает целевую часть из родительской строки. Мы познакомились с требуемым аргументом startIndex, значение которого включено в извлеченную подстроку, а также с аргументом endIndex, который указывает на завершение строки.
Затем мы изучили на примерах, как использовать substring() только с startIndex, и выяснили, как извлечь конец после первых n символов родительской строки. Мы также видели, как извлечь подстроку между двумя точками с переданными startIndex и endIndex. Мы обнаружили другой шаблон, в котором мы можем создать первые n символов, передав 0 в качестве startIndex и n в качестве endIndex. Мы также выяснили, как мы можем извлечь последние n символов, используя caller length - n.
Ближе к концу мы коснемся некоторых других нюансов использования значений startIndex и endIndex. В конце мы сравнили и обсудили, чем substring() отличается в реализации от JavaScript slice() и substr().
