Давайте сегодня рассмотрим некоторые основы JavaScript, основы слишком важны. Я до сих пор отчетливо помню, как весной этого года, когда я рекрутировал, интервьюер крупной фабрики поиздевался надо мной, что я не могу вспомнить JavaScript API 🤣 Слишком смущает, в основном потому, что я использовал слишком мало, поэтому мне все еще нужно использовать больше и накопить больше. Сегодня давайте взглянем на часто используемые строковые методы в JavaScript! Содержание статьи больше, рекомендуется собрать перед изучением!
1. Получить длину строки
Строки в JavaScript имеют свойство длины, которое можно использовать для получения длины строки:
const str = 'hello';
str.length // 输出结果：5
2. Получить значение в указанной позиции строки
Оба метода charAt() и charCodeAt() могут получить значение в указанной позиции по индексу:
- Метод charAt() получает символ в указанной позиции;
- Метод charCodeAt() получает значение Unicode символа в указанной позиции.
(1) символ()
Метод charAt() возвращает символ в указанной позиции. Его синтаксис следующий:
string.charAt(index)
index представляет значение индекса символа в строке:
const str = 'hello';
str.charAt(1) // 输出结果：e
Мы знаем, что строки также могут напрямую получать соответствующие символы через значение индекса, так в чем же разница между ним и charAt()? Давайте посмотрим пример:
const str = 'hello';
str.charAt(1) // 输出结果：e
str[1] // 输出结果：e
str.charAt(5) // 输出结果：''
str[5] // 输出结果：undefined
Видно, что когда значение index не находится в пределах длины str, str[index] вернет undefined, а charAt(index) вернет пустую строку, кроме того, str[index] не совместим с ie6- ie8, charAt(index) может быть совместим.
(2) charCodeAt()
charCodeAt(): этот метод возвращает значение Unicode символа в указанной позиции индекса. Возвращаемое значение — целое число от 0 до 65535, представляющее кодовую единицу UTF-16 в заданном индексе. Если в указанной позиции нет символа, он вернусьNaN:
let str = "abcdefg";
console.log(str.charCodeAt(1)); // "b" --> 98
С помощью этого метода вы можете получить символ, указанный в строке, чтобы указать диапазон значений в кодировке Unicode. Например, диапазоны кодирования Unicode чисел от 0 до 9: 48 ~ 57, можно фильтровать числа в строках через этот метод, конечно, если вы лучше знакомы с регулярными выражениями, это будет удобнее.
3. Узнать, содержит ли строка определенную последовательность
Все пять этих методов можно использовать для получения информации о том, содержит ли строка определенную последовательность. Первые два метода получают значение индекса указанного элемента и возвращают только позицию первого совпадающего значения. Последние три метода возвращают логическое значение, указывающее, соответствует ли заданное значение.
Примечание. Все эти 5 методов чувствительны к регистру!
(1) индекс()
indexOf(): найти персонажа,Если есть, вернуть позицию первого совпадения, иначе вернуть -1, синтаксис следующий:
string.indexOf(searchvalue,fromindex)
Метод имеет два параметра:
- searchvalue: требуется, указывает строковое значение, которое нужно получить;
- fromindex: необязательный целочисленный параметр, указывающий позицию в строке для начала поиска. Его допустимые значения от 0 до string.length - 1. Если этот параметр опущен, поиск начинается с первого символа строки.
let str = "abcdefgabc";
console.log(str.indexOf("a")); // 输出结果：0
console.log(str.indexOf("z")); // 输出结果：-1
console.log(str.indexOf("c", 4)) // 输出结果：9
(2) последнийИндексОф()
lastIndexOf(): Найти символ, если есть, вернуть позицию последнего совпадения, иначе вернуть -1
let str = "abcabc";
console.log(str.lastIndexOf("a")); // 输出结果：3
console.log(str.lastIndexOf("z")); // 输出结果：-1
Этот метод похож на indexOf(), за исключением того, что порядок поиска отличается: indexOf() — положительный поиск, а lastIndexOf() — обратный поиск.
(3) включает()
includes(): этот метод используется для определения того, содержит ли строка указанную подстроку. Возвращает true, если найдена совпадающая строка, иначе false. Синтаксис этого метода следующий:
string.includes(searchvalue, start)
Метод имеет два параметра:
- searchvalue: требуется, строка для поиска;
- start: необязательный, установите, чтобы начать поиск с этой позиции, по умолчанию 0.
let str = 'Hello world!';
str.includes('o') // 输出结果：true
str.includes('z') // 输出结果：false
str.includes('e', 2) // 输出结果：false
(4) начинается с()
startsWith(): этот метод используется для обнаружения строкследует ли начинать с указанной подстроки. Возвращает true, если он начинается с указанной подстроки, иначе false. Синтаксис аналогичен описанному выше методу include().
let str = 'Hello world!';
str.startsWith('Hello') // 输出结果：true
str.startsWith('Helle') // 输出结果：false
str.startsWith('wo', 6) // 输出结果：true
(5) заканчивается с()
endsWith(): этот метод используется для определения текущей строкизаканчивается ли указанная подстрока. Возвращает true, если переданная подстрока находится в конце строки поиска, иначе false. Его синтаксис следующий:
string.endsWith(searchvalue, length)
Метод имеет два параметра:
- searchvalue: требуется, подстрока для поиска;
- длина: установите длину строки, значение по умолчанию — исходная длина строки string.length.
let str = 'Hello world!';
str.endsWith('!') // 输出结果：true
str.endsWith('llo') // 输出结果：false
str.endsWith('llo', 5) // 输出结果：true
Как вы можете видеть, когда для второго параметра установлено значение 5, он будет получать первые 5 символов строки, поэтому он вернет true.
4. Объедините несколько строк
Метод concat() используется для объединения двух или более строк. Этот метод не изменяет исходную строку, а возвращает новую строку, объединяющую две или более строк. Его синтаксис следующий:
string.concat(string1, string2, ..., stringX)
Там, где требуются параметры string1, string2, ..., stringX, они будут объединены в строку из одного или нескольких строковых объектов.
let str = "abc";
console.log(str.concat("efg")); //输出结果："abcefg"
console.log(str.concat("efg","hijk")); //输出结果："abcefghijk"
Хотя метод concat() специально используется для объединения строк, оператор сложения + чаще всего используется при разработке, поскольку он проще.
5. Разделить строку на массив
Метод split() используется для разделения строки на массив строк. Этот метод не изменяет исходную строку. Его синтаксис следующий:
string.split(separator,limit)
Метод имеет два параметра:
- разделитель: Обязателен. Строка или регулярное выражение, которое отделяет строку от места, указанного этим параметром.
- ограничение: необязательно. Этот параметр указывает максимальную длину возвращаемого массива. Если этот параметр установлен, не будет возвращено больше подстрок, чем массив, указанный этим параметром. Если этот параметр не задан, будет разделена вся строка, независимо от ее длины.
let str = "abcdef";
str.split("c"); // 输出结果：["ab", "def"]
str.split("", 4) // 输出结果：['a', 'b', 'c', 'd']
Если в качестве разделителя используется пустая строка, то каждый символ в строке будет разделен.
str.split(""); // 输出结果：["a", "b", "c", "d", "e", "f"]
На самом деле, при разбиении строки на массив вы можете одновременно разделить несколько разделителей, используя регулярные выражения для достижения:
const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits); // 输出结果：["apples", "bananas", "cherries"]
6. Перехват строки
Методы substr(), substring() и slice() можно использовать для нарезки строк.
(1) срез()
Метод slice() используется для извлечения части строки и возвращает извлеченную часть в виде новой строки. Его синтаксис следующий:
string.slice(start,end)
Метод имеет два параметра:
- начало: обязательно. Начальный индекс перехватываемого сегмента, позиция первого символа равна 0. Если отрицательный, усеките хвост.
- конец: необязательно. Нижний индекс конца сегмента, подлежащего усечению. Если этот параметр не указан, извлекаемая подстрока включает строку от начала до конца исходной строки. Если параметр отрицательный, он указывает позицию от конца строки.
Как упоминалось выше, если start является отрицательным числом, параметр указывает позицию от конца строки. То есть -1 относится к последнему символу строки, -2 относится к предпоследнему символу и так далее:
let str = "abcdefg";
str.slice(1,6); // 输出结果："bcdef"
str.slice(1); // 输出结果："bcdefg"
str.slice(); // 输出结果："abcdefg"
str.slice(-2); // 输出结果："fg"
str.slice(6, 1); // 输出结果：""
Обратите внимание, что подстрока, возвращаемая этим методомВключить символ в начале,ноНе включать символы в конце.
(2) подстрока()
Метод substr() используется для извлечения указанного количества символов из строки, начинающейся с начального нижнего индекса. Его синтаксис следующий:
string.substr(start,length)
Метод имеет два параметра:
- запуск Обязательно. Начальный индекс извлекаемой подстроки. Должно быть числовым значением. Если отрицательный, параметр указывает позицию от конца строки. То есть -1 относится к последнему символу в строке, -2 относится к предпоследнему символу и так далее.
- длина: по желанию. Количество символов в подстроке. Должно быть числовым значением. Если этот параметр опущен, возвращается строка от начала до конца stringObject.
let str = "abcdefg";
str.substr(1,6); // 输出结果："bcdefg"
str.substr(1); // 输出结果："bcdefg" 相当于截取[1,str.length-1]
str.substr(); // 输出结果："abcdefg" 相当于截取[0,str.length-1]
str.substr(-1); // 输出结果："g"
(3) подстрока()
Метод substring() используется для извлечения символов в строке между двумя указанными нижними индексами. Его синтаксис следующий:
string.substring(from, to)
Метод имеет два параметра:
- от: Обязательно. Неотрицательное целое число, указывающее позицию в строке первого символа извлекаемой подстроки.
- до: опционально. Неотрицательное целое число, которое на единицу больше, чем позиция в строке последнего символа извлекаемой подстроки. Если этот параметр опущен, возвращаемая подстрока будет продолжаться до конца строки.
Уведомление:Если параметры from и to равны, то метод возвращает пустую строку (то есть строку длины 0). Если from больше to, метод меняет местами два аргумента перед извлечением подстроки. И этот метод не принимает отрицательные параметры, если параметр является отрицательным числом, он вернет эту строку.
let str = "abcdefg";
str.substring(1,6); // 输出结果："bcdef" [1,6)
str.substring(1); // 输出结果："bcdefg" [1,str.length-1]
str.substring(); // 输出结果："abcdefg" [0,str.length-1]
str.substring(6,1); // 输出结果 "bcdef" [1,6)
str.substring(-1); // 输出结果："abcdefg"
Обратите внимание, что подстрока, возвращаемая этим методомВключить символ в начале,ноНе включать символы в конце.
7. Преобразование регистра строк
Методы toLowerCase() и toUpperCase() можно использовать для преобразования регистра строк.
(1) в нижний регистр()
toLowerCase(): этот метод используется для преобразования строки в нижний регистр.
let str = "adABDndj";
str.toLowerCase(); // 输出结果："adabdndj"
(2) toUpperCase()
toUpperCase(): этот метод используется для преобразования строки в верхний регистр.
let str = "adABDndj";
str.toUpperCase(); // 输出结果："ADABDNDJ"
Мы можем использовать этот метод, чтобы сделать первую букву в строке заглавной:
let word = 'apple'
word = word[0].toUpperCase() + word.substr(1)
console.log(word) // 输出结果："Apple"
8. Сопоставление строковых шаблонов
Методы replace(), match() и search() можно использовать для сопоставления или замены символов.
(1) заменить ()
replace(): этот метод используется для замены одних символов другими символами в строке или для замены подстроки, соответствующей регулярному выражению. Его синтаксис следующий:
string.replace(searchvalue, newvalue)
Метод имеет два параметра:
- значение поиска: обязательно. Объект RegExp, указывающий подстроку или шаблон для замены. Если значение является строкой, оно используется в качестве буквенного текстового шаблона для извлечения, а не сначала преобразуется в объект RegExp.
- новое значение: требуется. строковое значение. Указывает замещающий текст или функцию, которая генерирует замещающий текст.
let str = "abcdef";
str.replace("c", "z") // 输出结果：abzdef
Выполнить глобальную замену без учета регистра:
let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red"); // 输出结果：'Mr red has a red house and a red car'
Уведомление:Если регулярное выражение имеет глобальный флаг g, то метод replace() заменит все совпадающие подстроки. В противном случае заменяется только первая совпадающая подстрока.
(2) совпадение ()
match(): этот метод используется для извлечения указанного значения в строке или для поиска совпадения одного или нескольких регулярных выражений. Этот метод похож на indexOf() и lastIndexOf(), но возвращает указанное значение вместо позиции строки. Его синтаксис следующий:
string.match(regexp)
Параметры Regexp необходимы процесса, регулируемые объекты в заранее определенном рисунке. Если параметр не является объектом REGEXP, необходимо пропустить его к конструктору Regexp, преобразуйте его в объект RegexP.
Уведомление:Этот метод возвращает массив, содержащий совпадающие результаты. Содержимое этого массива зависит от того, имеет ли регулярное выражение глобальный флаг g.
let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]
(3) поиск()
search()Методы используются для извлечения указанной подстроки в строке или для извлечения подстроки, соответствующей регулярному выражению. Его синтаксис следующий:
string.search(searchvalue)
Регулярным выражением параметра этого метода может быть подстрока, которую необходимо получить в строке, или это может быть объект RegExp, который необходимо получить.
Уведомление:Чтобы выполнить поиск без учета регистра, добавьте флаг i. Этот метод не выполняет глобальное совпадение, он будет игнорировать флаг g, то есть будет возвращать только результат первого успешного совпадения. Возвращает -1, если совпадающая подстрока не найдена.
возвращаемое значение:Возвращает начальную позицию первой подстроки в строке, соответствующей регулярному выражению.
let str = "abcdef";
str.search(/bcd/) // 输出结果：1
9. Удалите конечные пробелы из строк
Три метода trim(), trimStart() и trimEnd() могут использоваться для удаления пробелов в начале и в конце строки, включая пробелы, символы табуляции, символы новой строки и другие пробелы.
(1) отделка ()
Метод trim() используется для удаления пробелов в начале и конце строки, этот метод не изменяет исходную строку:
let str = " abcdef "
str.trim() // 输出结果："abcdef"
Обратите внимание, что этот метод не применяется к типам null, undefined, Number.
(2) триммингстарт()
Поведение метода trimStart() такое же, как иtrim()то же самое, но возвращаетНовая строка с удаленным пробелом в начале исходной строки, который не изменяет исходную строку:
const s = ' abc ';
s.trimStart() // "abc "
(3) обрезатьКонец()
Поведение метода trimEnd() такое же, как иtrim()то же самое, но возвращаетНовая строка с удаленным пробелом в конце исходной строки, который не изменяет исходную строку:
const s = ' abc ';
s.trimEnd() // " abc"
10. Получить саму строку
Методы valueOf() и toString() возвращают значение самой строки, что не очень полезно.
(1) значение()
valueOf(): возвращает необработанное значение некоторого строкового объекта, этот метод обычно вызывается JavaScript автоматически, а не явно в коде.
let str = "abcdef"
console.log(str.valueOf()) // "abcdef"
(2) toString()
toString(): возвращает сам строковый объект
let str = "abcdef"
console.log(str.toString()) // "abcdef"
11. Повтор строки
Метод repeat() возвращает новую строку, которая повторяет исходную строку n раз:
'x'.repeat(3) // 输出结果："xxx"
'hello'.repeat(2) // 输出结果："hellohello"
'na'.repeat(0) // 输出结果：""
Если аргумент десятичный, он будет округлен в меньшую сторону:
'na'.repeat(2.9) // 输出结果："nana"
Если параметр отрицательный или бесконечность, будет сообщено об ошибке:
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError
Если аргумент является десятичным числом от 0 до -1, он эквивалентен 0, поскольку сначала выполняется округление. Десятичное число от 0 до -1 после округления равно -0, а повтор считается равным 0.
'na'.repeat(-0.9) // 输出结果：""
Если аргумент равен NaN, он эквивалентен 0:
'na'.repeat(NaN) // 输出结果：""
Если параметр повтора является строкой, он сначала будет преобразован в число.
'na'.repeat('na') // 输出结果：""
'na'.repeat('3') // 输出结果："nanana"
12. Заполните длину строки
Методы padStart() и padEnd() используются для заполнения длины строки. Если строка недостаточно длинная, она будет заполнена в начале или в конце.
(1) padStart()
padStart()Используется для завершения головы. Этот метод имеет два параметра, где первый параметр — это число, указывающее длину строки после завершения, а второй параметр — это строка, используемая для завершения.
Возвращает исходную строку, если длина исходной строки равна или превышает указанную минимальную длину:
'x'.padStart(1, 'ab') // 'x'
Если сумма длины строки, используемой для завершения, и исходной строки превышает указанную минимальную длину, завершенная строка, превышающая количество цифр, будет усечена:
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
Если второй параметр опущен, по умолчанию для завершения длины используются пробелы:
'x'.padStart(4) // ' x'
Обычно функция padStart() используется для указания количества цифр для завершения значения. Одно из требований, которое я недавно сделал, состоит в том, чтобы дополнить возвращаемый номер страницы тремя цифрами. Например, первая страница отображается как 001, а это Метод можно использовать для работы:
"1".padStart(3, '0') // 输出结果： '001'
"15".padStart(3, '0') // 输出结果： '015'
(2) padEnd()
padEnd()Используется для завершения хвоста. Этот метод также получает два параметра, первый параметр — это максимальная длина действительного завершения строки, а второй параметр — строка, используемая для завершения:
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
13. Преобразование строки в число
Оба метода parseInt() и parseFloat() используются для преобразования строк в числа.
(1) синтаксический анализ()
Метод parseInt() используется для анализа строки и возврата целого числа. Его синтаксис следующий:
parseInt(string, radix)
Метод имеет два параметра:
- строка: обязательна. Строка для анализа.
- основание: необязательно. Указывает основание числа для анализа. Значение находится в диапазоне от 2 до 36.
Когда значение параметра счисления равно 0 или параметр не установлен, parseInt() будет оценивать основание числа в соответствии со строкой.
parseInt("10"); // 输出结果：10
parseInt("17",8); // 输出结果：15 (8+7)
parseInt("010"); // 输出结果：10 或 8
Когда значение параметра radix начинается с «0x» или «0X», оно будет базовым 16:
parseInt("0x10") // 输出结果：16
Если аргумент меньше 2 или больше 36, parseInt() вернет NaN:
parseInt("50", 1) // 输出结果：NaN
parseInt("50", 40) // 输出结果：NaN
Будет возвращена только первая цифра в строке, пока не встретится первый нецифровой символ:
parseInt("40 4years") // 输出结果：40
NaN возвращается, если первый символ строки не может быть преобразован в число:
parseInt("new100") // 输出结果：NaN
Допускаются пробелы в начале и конце строки:
parseInt(" 60 ") // 输出结果： 60
(2) parseFloat()
Метод parseFloat() анализирует строку и возвращает число с плавающей запятой. Этот метод указывает, является ли первый символ в строке числом. Если это так, строка анализируется до тех пор, пока не будет достигнут конец числа, после чего число возвращается как число, а не как строка. Его синтаксис следующий:
parseFloat(string)
parseFloat анализирует свой строковый аргумент как число с плавающей запятой и возвращает его. Если во время синтаксического анализа он встречает символ, отличный от знака (+ или -), числа (0–9), десятичной точки или показателя степени (e или E) в экспоненциальном представлении, он игнорирует этот символ и следующие за ним все символы. of , вернуть текущее проанализированное число с плавающей запятой. При этом пробел в первой позиции строки параметра будет игнорироваться.
parseFloat("10.00") // 输出结果：10.00
parseFloat("10.01") // 输出结果：10.01
parseFloat("-10.01") // 输出结果：-10.01
parseFloat("40.5 years") // 输出结果：40.5
parseFloat возвращает NaN, если первый символ строки аргумента не может быть проанализирован как число.
parseFloat("new40.5") // 输出结果：NaN
На сегодня это все, если вы считаете это полезным, ставьте лайк, добавляйте в закладки и подписывайтесь на меня!
Рекомендуемое чтение:
- Софт скиллс, необходимый для собеседования с программистом, стоит собрать!
- Jin Jiu Yin Shi, вы готовы к интервью? (с кратким изложением вопросов интервью на 30 слов)
- Каких подробностей о типах данных JavaScript вы не знали?
- 24 метода зацикливания в JavaScript, знаете ли вы их все?
- Говоря о подъеме переменных JavaScript
- 35 военных правил Yahoo, сколько вы знаете?