Эта статья представляет собой расшифровку моей бесплатной серии YouTube об основах веб-разработки. Если вы предпочитаете смотреть, а не читать, посетите мой канал Dev Newbs.
Привет, разработчики! Метод дня может быть простым в использовании, но в то же время он может быть настоящей головной болью. Сегодня мы заменим вещи. Встречайте метод replace(). Давайте погрузимся прямо в.
Метод replace() возвращает новую строку, в которой некоторые или все совпадения шаблона заменены заменой. Шаблон является первым параметром и может быть либо регулярным выражением, либо простым строковым значением. Замена — это второй параметр, и это может быть либо простое строковое значение, либо функция, вызываемая для каждого совпадения. Если шаблон является строковым значением или регулярное выражение не содержит глобального флага, будет заменено только первое вхождение.
Давайте рассмотрим все комбинации в первом примере.
const str = "The blue sweater itches. I'll wear a red t-shirt and a blue jeans.";
let regExp = /blue/g;
let regExp2 = /blue|red/gi;
// PATTERN: string
// REPLACEMENT: string
"S -> S : " + str.replace("blue", "green")
// OUTPUT:
// S -> S : The green sweater itches. I'll wear a red t-shirt and // a blue jeans.
// PATTERN: RexExp
// REPLACEMENT: string
"RE -> S : " + str.replace(regExp, "green")
// OUTPUT:
// RE -> S : The green sweater itches. I'll wear a red t-shirt and // a green jeans.
// PATTERN: string
// REPLACEMENT: function
console.log
(
"S -> fn : " +
str.replace
(
"sweater",
(x) => {
return x.toUpperCase()
}
)
);
// OUTPUT:
// S -> fn : The blue SWEATER itches. I'll wear a red t-shirt and a // blue jeans.
// PATTERN: RexExp
// REPLACEMENT: function
console.log
(
"RE -> fn : " +
str.replace(
regExp2,
function (x)
{
return x.toUpperCase()
}
)
);
// OUTPUT:
// RE -> fn : The BLUE sweater itches. I'll wear a RED t-shirt and a // BLUE jeans.
Существует четыре доступных комбинации типов значений «шаблон» и «замена».
Первый — самый простой. Мы ищем строку «синяя» и заменяем ее на строку «зеленая». Заменяется первое найденное вхождение строки. Не все они.
Во втором случае используется регулярное выражение для поиска совпадения, которое нужно заменить простым строковым значением «зеленый». Поскольку мы используем глобальный флаг в нашем регулярном выражении, мы будем заменять все совпадения, а не только первое.
Третий случай — простая строка «свитер», заменяемая функцией. Наша функция преобразует любое совпадение во все символы верхнего регистра. Поскольку мы используем простую строку в качестве шаблона, заменяется только первое совпадение.
Последний — четвертый случай — это совпадение с регулярным выражением, которое заменяется функцией. Мы снова используем глобальный флаг, поэтому мы находим все совпадения, а не только первое, и заменяем их версией совпавшего слова в верхнем регистре.
Я разделил последние два случая на несколько строк, чтобы их было легче читать, но вы можете поместить все в одну строку, если хотите. Это действительно не имеет никакого значения.
С помощью метода replace можно проделывать множество крутых трюков. Я выбрал некоторые из них, чтобы показать вам все возможности.
Во втором примере показано, как легко поменять порядок имени и фамилии. Если у вас есть массив или список имен, это может оказаться очень удобным.
let re = /(\w+)\s(\w+)/; let fullName = 'John Smith'; let newstr = fullName.replace(re, '$2, $1'); newstr // Smith, John
В нашем регулярном выражении указаны две группы символов, разделенные пробелом. Вы можете получить доступ к этой группе, используя символ знака доллара и порядок создания группы — начиная с первой. У нас есть две группы $1 и $2. Первый представляет имя, а второй - фамилию. Все, что нам нужно сделать, это поменять их порядок в выводе.
Следующий трюк может пригодиться, если вам нужно проанализировать стили CSS и параметры стиля JS. Javascript позволяет вам стилизовать элементы, используя метод стиля, но он принимает стили CSS в формате верблюжьего регистра вместо формата дефиса. Поэтому, если вы хотите изменить значение левого заполнения, вы должны ввести «paddingLeft» вместо «padding-left». И, к счастью для вас, есть простой способ преобразовать формат верблюжьего регистра в формат дефиса с помощью метода replace().
function upperToHyphenLower(match, offset, string) {
return (offset > 0 ? '-' : '') + match.toLowerCase();
}
function camelCaseToHyphenFormat(propertyName) {
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
camelCaseToHyphenFormat("marginBottom") // margin-bottom
Весь принцип преобразования заключается в том, что мы ищем заглавные буквы внутри заданной строки. Если мы найдем его, мы заменим его не только строчной версией, но и поставим перед ним дефис. И это все.
Последний трюк позволяет преобразовать физические единицы измерения температуры из градусов Фаренгейта в градусы Цельсия. Я немного подправил исходную версию функции, чтобы она принимала значения, даже если между числом и буквой F, обозначающей градусы Фаренгейта, есть пробел. А также ставит пробел между полученным числом и градусами Цельсия.
function f2c(x) {
function convert(str, p1, offset, s) {
return ((p1 - 32) * 5/9).toFixed(2) + ' C';
}
let s = String(x);
let test = /(-?\d+(?:\.\d*)?)( )*F\b/g;
return s.replace(test, convert);
}
f2c("212 F") // 100.00 C
f2c("0F") // -17.78 C
Вы можете вызвать метод, просто указав любое числовое значение, за которым следует буква «F». В результате получается та же температура в градусах Цельсия.
Хорошо, это было очень весело, но все хорошее когда-нибудь заканчивается. Это для нас сегодня. Как всегда, спасибо за внимание и увидимся в следующий раз с еще одним методом.
