В моей предыдущей статье о методах массива ES6 я представил новые методы, доступные в ECMAScript 6, которые работают с типом Array . В этом руководстве вы узнаете о новых методах ES6, которые работают со строками: String.prototype.*
Мы разработаем несколько примеров и отметим доступные для них полифилы. Помните, что если вы хотите заполнить их все, используя одну библиотеку, вы можете использовать es6-shim Пола Миллера .
String.prototype.startsWith ()
Одна из наиболее часто используемых функций в каждом современном языке программирования — это проверка, начинается ли строка с данной подстроки. До ES6 у JavaScript не было такой функции, то есть вы должны были написать ее самостоятельно. Следующий код показывает, как разработчики обычно заполняют его:
if (typeof String.prototype.startsWith !== 'function') { String.prototype.startsWith = function (str){ return this.indexOf(str) === 0; }; }
Или, альтернативно:
if (typeof String.prototype.startsWith !== 'function') { String.prototype.startsWith = function (str){ return this.substring(0, str.length) === str; }; }
Эти фрагменты все еще действительны, но они не воспроизводят точно, что делает недавно доступный String.prototype.startsWith() . Новый метод имеет следующий синтаксис:
String.prototype.startsWith(searchString[, position]);
Вы можете видеть, что, кроме подстроки, он принимает второй аргумент. Параметр searchString указывает подстроку, которую вы хотите проверить, это начало строки. position указывает позицию, с которой начинается поиск. Значение по умолчанию для position равно 0. Методы возвращают true если строка начинается с указанной подстроки, и false противном случае. Помните, что метод чувствителен к регистру, поэтому «Hello» отличается от «hello».
Пример использования этого метода показан ниже:
const str = 'hello!'; let result = str.startsWith('he'); // prints "true" console.log(result); // verify starting from the third character result = str.startsWith('ll', 2); // prints "true" console.log(result);
Демонстрационная версия предыдущего кода показана ниже и также доступна на JSBin .
Метод поддерживается в Node и во всех современных браузерах, за исключением Internet Explorer. Если вам требуется поддержка старых браузеров, полифилл для этого метода можно найти на странице метода в MDN . Другой полифилл также был разработан Матиасом Биненсом.
String.prototype.endsWith ()
В дополнение к String.prototype.startsWith() , ECMAScript 6 представляет метод String.prototype.endsWith() . Он проверяет, что строка оканчивается заданной подстрокой. Синтаксис этого метода, показанный ниже, очень похож на String.prototype.startsWith() :
String.prototype.endsWith(searchString[, position]);
Как видите, этот метод принимает те же параметры, что и String.prototype.startsWith() , а также возвращает значения того же типа.
Разница в том, что параметр position позволяет вам искать внутри строки, как если бы строка была только этой длинной. Другими словами, если у нас есть строка house и мы вызываем метод с помощью 'house'.endsWith('us', 4) , мы получаем значение true , потому что у нас действительно есть строка hous (обратите внимание на отсутствующее “e”) ,
Пример использования этого метода показан ниже:
const str = 'hello!'; const result = str.endsWith('lo!'); // prints "true" console.log(result); // verify as if the string was "hell" result = str.endsWith('lo!', 5); // prints "false" console.log(result);
Демонстрационная версия предыдущего фрагмента приведена ниже и также доступна на сайте JSBin .
Метод поддерживается в Node и во всех современных браузерах, за исключением Internet Explorer. Если вам требуется поддержка старых браузеров, полифилл для этого метода можно найти на странице метода в MDN . Другой полифилл был разработан Матиасом Биненсом.
String.prototype.includes ()
Пока мы говорим о проверке, содержится ли одна строка в другой, позвольте мне познакомить вас с String.prototype.includes() . Он возвращает true если строка содержится в другом, независимо от того, где, и false противном случае.
Его синтаксис показан ниже:
String.prototype.includes(searchString[, position]);
Значение параметров такое же, как и для String.prototype.startsWith() , поэтому я не буду их повторять. Пример использования этого метода показан ниже:
const str = ; let result = str.includes('Aurelio'); // prints "true" console.log(result); result = str.includes('Hello', 10); // prints "false" console.log(result);
Вы можете найти живое демо ниже, а также как в JSBin .
String.prototype.includes() поддерживается в Node и во всех современных браузерах, за исключением Internet Explorer. Если вам требуется поддержка старых браузеров, как и в случае с другими методами, описанными в этом руководстве, вы можете найти полифилл, предоставленный Матиасом Биненсом (этот парень знает, как выполнять свою работу!), И другой в сети разработчиков Mozilla .
Примечание: до версии 48 Firefox использует нестандартное имя contains .
String.prototype.repeat ()
Давайте теперь перейдем к другому типу метода. String.prototype.repeat() — это метод, который возвращает новую строку, содержащую ту же строку, в которой она была вызвана, но повторяется указанное количество раз. Синтаксис этого метода следующий:
String.prototype.repeat(times);
Параметр times указывает, сколько раз строка должна быть повторена. Если вы передадите ноль, вы получите пустую строку, а если вы передадите отрицательное число или бесконечность, вы получите RangeError .
Пример использования этого метода показан ниже:
const str = 'hello'; let result = str.repeat(3); // prints "hellohellohello" console.log(result); result = str.repeat(0); // prints "" console.log(result);
Демонстрационная версия предыдущего кода показана ниже и также доступна на JSBin .
Метод поддерживается в Node и во всех современных браузерах, за исключением Internet Explorer. Если вам требуется поддержка старых браузеров, для этого метода доступны две полифилы: одна, разработанная Матиасом Биненсом, и другая в Mozilla Developer Network .
String.raw ()
Последний метод, который я хочу String.raw() в этом руководстве, — это String.raw() . Он определяется как функция тега шаблонных строк
. Это интересно, потому что это своего рода замена шаблонным библиотекам, хотя я не уверен на 100%, что он может масштабироваться настолько, чтобы фактически заменить эти библиотеки. Тем не менее, идея в основном такая же, как мы скоро увидим. Он собирает строку и заменяет каждый заполнитель указанным значением.
Его синтаксис следующий (обратите внимание на галочки):
String.raw`templateString`
Параметр templateString представляет строку, содержащую шаблон для обработки.
Чтобы лучше понять эту концепцию, давайте рассмотрим конкретный пример:
const name = ; const result = String.raw`Hello, my name is ${name}`;
Демонстрационная версия предыдущего кода показана ниже и также доступна на JSBin .
Метод поддерживается в Node и во всех современных браузерах, за исключением Opera и Internet Explorer. Если вам требуется поддержка старых браузеров, вы можете использовать полифилл, такой как этот, доступный на npm .
Вывод
В этом руководстве вы узнали о нескольких новых методах, введенных в ECMAScript 6, которые работают со строками. Другими методами, которые мы не рассмотрели, являются String.fromCodePoint () , String.prototype.codePointAt () и String.prototype.normalize () . Надеюсь, вам понравилась статья, и вы продолжите следить за нашим каналом, чтобы больше узнать о ECMAScript 6.