Самые необходимые строковые и числовые методы в JavaScript
03 мар., 2020
String
У объектаStringесть один статический метод,String.fromCharCode(), который обычно используют для создания строкового представления последовательности Unicode символов. В этом примере мы делаем простую строку с использованием ASCII кодов:
String.fromCodePoint(70, 108, 97, 118, 105, 111) //'Flavio'Вы также можете использовать восьмеричные и шестнадцатеричные числа:
String.fromCodePoint(0x46, 0154, parseInt(141, 8), 118, 105, 111) //'Flavio'Все другие, описанные ниже методы, это методы“из коробки”, которые работают на строках.
charAt()
Отдаёт символ под заданным индексомi.
Примеры:
'Flavio'.charAt(0) //'F'
'Flavio'.charAt(1) //'l'
'Flavio'.charAt(2) //'a'Если вы зададите индекс, который не подходит по строке, то на выходе вы получите уже пустую строку.
В JavaScript нет типа char, так что char это строка с длиной1.
charCodeAt()
Отдаёт код символа под индексомi. Как и сcharAt(), отдаёт Unicode 16-битное целое число, представляющее символ:
'Flavio'.charCodeAt(0) //70
'Flavio'.charCodeAt(1) //108
'Flavio'.charCodeAt(2) //97ВызовtoString()после него, отдаст шестнадцатеричное число, которое вы можете найти в любой Unicode таблице,такой как эта.
codePointAt()
Этот метод был представлен уже в ES2015, чтобы работать с Unicode символами, которые не могут быть представлены как единичная 16-ти битная Unicode единица и которым вместо этого нужно их две.
ИспользуяcharCodeAt(), вам надо получить первый и второй, и затем совместить их. ИспользуяcodePointAt()вы получаете весь символ в одном запросе.
К примеру, этот китайский символ “𠮷” состоит из двух UTF-16 частей:
"𠮷".charCodeAt(0).toString(16) //d842
"𠮷".charCodeAt(1).toString(16) //dfb7Комбинируем эти два unicode символа:
"\ud842\udfb7" //"𠮷"Вы можете получить тот же результат, но только используяcodePointAt():
"𠮷".codePointAt(0) //20bb7Если вы создаете новый символ, комбинируя эти unicode символы:
"\u{20bb7}" //"𠮷"concat()
Объединяет актуальную строку со строкойstr.
Пример:
'Flavio'.concat(' ').concat('Copes') //'Flavio Copes'Вы можете указывать сколько угодно аргументов и в таком случае, все эти аргументы будут объединены в строку.
'Flavio'.concat(' ', 'Copes') //'Flavio Copes'endsWith()
Проверяет заканчивается ли строка со значением другой строкиstr.
'JavaScript'.endsWith('Script') //true
'JavaScript'.endsWith('script') //falseВы можете передать второй параметр с целым числом иendWith()будет рассматривать оригинальную строку, как если бы она этой заданной длины:
'JavaScript'.endsWith('Script', 5) //false
'JavaScript'.endsWith('aS', 5) //trueincludes()
Проверяет есть ли в строке значение строкиstr.
'JavaScript'.includes('Script') //true
'JavaScript'.includes('script') //false
'JavaScript'.includes('JavaScript') //true
'JavaScript'.includes('aSc') //true
'JavaScript'.includes('C++') //falseincludes()также принимает второй опциональный параметр, целое число, которое указывает на позицию с которой начинать поиск.
'a nice string'.includes('nice') //true
'a nice string'.includes('nice', 3) //false
'a nice string'.includes('nice', 2) //trueindexOf()
Даёт позицию начала заданной строкиstrв строке, на которой применяется метод.
'JavaScript'.indexOf('Script') //4
'JavaScript'.indexOf('JavaScript') //0
'JavaScript'.indexOf('aSc') //3
'JavaScript'.indexOf('C++') //-1Вы можете передать второй параметр, чтобы указать точку старта:
'a nice string'.indexOf('nice') !== -1 //true
'a nice string'.indexOf('nice', 3) !== -1 //false
'a nice string'.indexOf('nice', 2) !== -1 //truelastIndexOf()
Даёт позицию последнего появления строкиstrв актуальной строке.
Отдаёт-1, если поисковая строка не найдена.
'JavaScript is a great language. Yes I mean JavaScript'.lastIndexOf('Script') //47
'JavaScript'.lastIndexOf('C++') //-1localeCompare()
Этот метод сравнивает строки и возвращает число (отрицательное или положительное), которое говорит, является ли данная строка меньше, равной или больше, чем строка переданная как аргумент, но в зависимости от языка.
Язык определяется настоящим местоположением или вы можете указать его, как второй аргумент:
'a'.localeCompare('à') //-1
'a'.localeCompare('à', 'it-IT') //-1Очень часто его используют для сортировки массивов:
['a', 'b', 'c', 'd'].sort((a, b) => a.localeCompare(b))Где бы вы обычно использовали:
['a', 'b', 'c', 'd'].sort((a, b) => (a > b) ? 1 : -1)Только тут мы можем это сделать с помощью localeCompare(), который позволит нам работать с алфавитами по всему миру.
Объект переданный как третий аргумент, может быть использован для передачи дополнительных условий. Посмотрите все возможные значения для этих условийна MDN.
match()
А вот работа с регулярными выражениями RegEx.
'Hi Flavio'.match(/avio/)
// Array [ 'avio' ]
'Test 123123329'.match(/\d+/)
// Array [ "123123329" ]
'hey'.match(/(hey|ho)/)
//Array [ "hey", "hey" ]
'123s'.match(/^(\d{3})(\w+)$/)
//Array [ "123s", "123", "s" ]
'123456789'.match(/(\d)+/)
//Array [ "123456789", "9" ]
'123s'.match(/^(\d{3})(?:\s)(\w+)$/)
//null
'123 s'.match(/^(\d{3})(?:\s)(\w+)$/)
//Array [ "123 s", "123", "s" ]
'I saw a bear'.match(/\bbear/) //Array ["bear"]
'I saw a beard'.match(/\bbear/) //Array ["bear"]
'I saw a beard'.match(/\bbear\b/) //null
'cool_bear'.match(/\bbear\b/) //nullnormalize()
В Unicode есть четыре главные формы нормализации. Их коды этоNFC,NFD,NFKCиNFKD. На Википедии есть хорошаястатья про это.
Методnormalize()возвращает строку, нормализованную в соответствии с указанной формой, которую вы передаёте как параметр. (NFCиспользуется как стандарт, если она не указана в ручную).
Вот пример с MDN:
'\u1E9B\u0323'.normalize() //ẛ̣
'\u1E9B\u0323'.normalize('NFD') //ẛ̣
'\u1E9B\u0323'.normalize('NFKD') //ṩ
'\u1E9B\u0323'.normalize('NFKC') //ṩpadEnd()
Смысл этого метода в том, чтобы добавлять в строку символы и пробелы, пока она не достигнет заданной длины.
padEnd() был представлен в ES2017, как метод добавляющий символы в конец строки.
padEnd(targetLength [, padString])Простое применение:
padStart()
Смысл этого метода в том, чтобы добавлять строки или символы как в предыдущем методе, но уже с самого начала строки.
padStart(targetLength [, padString])
![padStart(targetLength [, padString])](/static/aa295a96831e6a71c88e61b9a82c7ba4/74c52/1_LeXUASRJJwHSpxc8fn02PA.png "padStart(targetLength [, padString])")
repeat()
Этот метод был представлен в ES2015 и повторяет строки заданное количество раз.
'Ho'.repeat(3) //'HoHoHo'Отдает пустую строку, если параметр не указан или параметр равен нулю. А в случае с отрицательным числом вы получитеRangeError.
replace()
Этот метод находит первое упоминаниеstr1в заданной строке и заменяет его наstr2.
Отдаёт новую строку, не трогая оригинальную.
'JavaScript'.replace('Java', 'Type') //'TypeScript'Вы можете передать регулярное выражение как первый аргумент:
'JavaScript'.replace(/Java/, 'Type') //'TypeScript'replace()заменяет только первое упоминание, но а если вы будете использовать regex как поиск строки, то вы можете использовать (/g):
'JavaScript JavaX'.replace(/Java/g, 'Type') //'TypeScript TypeX'Второй параметр может быть функцией. Эта функция будет вызвана с заданным количеством аргументов, когда найдётся совпадение (или каждое совпадение в случае с regex/g):
- Нужная строка
- Целое число, которое указывает позицию в строке, где произошло совпадение
- Строка
Отдающееся значение функции заменит совпадающую часть строки.
Пример:
'JavaScript'.replace(/Java/, (match, index, originalString) => {
console.log(match, index, originalString)
return 'Test'
}) //TestScriptЭто работает и для обычных строк, а не только для регулярок:
'JavaScript'.replace('Java', (match, index, originalString) => {
console.log(match, index, originalString)
return 'Test'
}) //TestScriptВ случае c regex, когда выбираются группы, все эти значения будут переданы как аргументы прямо после параметра совпадения.
'2015-01-02'.replace(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/, (match, year, month, day, index, originalString) => {
console.log(match, year, month, day, index, originalString)
return 'Test'
}) //Testsearch()
Отдаёт расположение первого совпадения строкиstrв заданной строке.
Этот метод отдаёт индекс начала упоминания или-1, если такого не было найдено.
'JavaScript'.search('Script') //4
'JavaScript'.search('TypeScript') //-1Вы можете использовать регулярные выражения (и на самом деле, даже если вы передаёте строку, то внутренне оно тоже применяется как регулярное выражение).
'JavaScript'.search(/Script/) //4
'JavaScript'.search(/script/i) //4
'JavaScript'.search(/a+v/) //1slice()
Отдает новую строку, которая является частью строки на которой применялся метод, от позицийbeginдоend.
Оригинальная строка не изменяется.
endопциональна.
'This is my car'.slice(5) //is my car
'This is my car'.slice(5, 10) //is myЕсли вы выставите первым параметром отрицательное число, то начальный индекс будет считаться с конца и второй параметр тоже должен быть отрицательным, всегда ведя отсчет с конца:
'This is my car'.slice(-6) //my car
'This is my car'.slice(-6, -4) //mysplit()
Этот метод вырезает строку при её нахождении в строке на которой применяется метод (чувствительный к регистру) и отдаёт массив с токенами.
const phrase = 'I love my dog! Dogs are great'
const tokens = phrase.split('dog')
tokens //["I love my ", "! Dogs are great"]startsWith()
Проверяет начинается ли строка со значенияstr.
Вы можете вызватьstartWith()на любой строке, указать подстроку и проверить отдаёт результатtrueилиfalse.
'testing'.startsWith('test') //true
'going on testing'.startsWith('test') //falseЭтот метод допускает второй параметр, который позволит вам указать с какого символа вам надо начать проверку:
'testing'.startsWith('test', 2) //false
'going on testing'.startsWith('test', 9) //truetoLocaleLowerCase()
Этот метод отдаёт новую строку, которая представляет собой изначальную строку в нижнем регистре, в соответствии с нормами разметки указанной локали.
Собственно, первый параметр представляет локаль, но он опционален. Если его пропустить, то будет использоваться актуальная локаль:
'Testing'.toLocaleLowerCase() //'testing'
'Testing'.toLocaleLowerCase('it') //'testing'
'Testing'.toLocaleLowerCase('tr') //'testing'Как и всегда, мы можем не осознавать все преимущества интернационализации, но я читал на MDN, что правила разметки текста в турецком языке отличаются от других языков, чьё описание основано на латинице.
В общем, это как иtoLowerCase(), но с учетом локали.
toLocaleUpperCase()
Этот метод отдаёт новую строку, которая представляет собой изначальную строку в верхнем регистре, в соответствии с нормами разметки указанной локали.
Первым параметром указывается локаль, но это опционально, как и в случае с методом выше:
'Testing'.toLocaleUpperCase() //'TESTING'
'Testing'.toLocaleUpperCase('it') //'TESTING'
'Testing'.toLocaleUpperCase('tr') //'TESTİNG'toLowerCase()
Этот метод отдаёт новую строку с текстом в нижнем регистре.
Не изменяет изначальную строку.
Не принимает параметры.
Использование:
'Testing'.toLowerCase() //'testing'Работает как иtoLocaleLowerCase(), но не учитывает локали.
toString() Отдает строку из заданного строчного объекта.
const str = new String('Test')
str.toString() //'Test'toUpperCase()
Отдаёт новую строку с текстом в верхнем регистре.
Не изменяет оригинальную строку.
Не принимает параметры.
Использование:
'Testing'.toUpperCase() //'TESTING'Если вы передадите пустую строку, то он возвратит пустую строку.
Метод похож наtoLocaleUpperCase(), но не принимает параметры.
trim()
Отдает новую строку удаляя пробелы вначале и в конце оригинальной строки.
'Testing'.trim() //'Testing'
' Testing'.trim() //'Testing'
' Testing '.trim() //'Testing'
'Testing '.trim() //'Testing'trimEnd()
Отдаёт новую строку, удаляя пробелы только из конца оригинальной строки.
'Testing'.trimEnd() //'Testing'
' Testing'.trimEnd() //' Testing'
' Testing '.trimEnd() //' Testing'
'Testing '.trimEnd() //'Testing'trimStart()
Отдаёт новую строку, удаляя пробелы из начала оригинальной строки.
'Testing'.trimStart() //'Testing'
' Testing'.trimStart() //'Testing'
' Testing '.trimStart() //'Testing '
'Testing'.trimStart() //'Testing'valueOf()
Отдает строчное представление заданного строчного объекта:
const str = new String('Test')
str.valueOf() //'Test'Это тоже самое, что иtoString()
Теперь пройдемся по числовым методам.
isInteger()
Отдастtrue, если переданное значение является целым числом. Всё иное, такое как, логические значения, строки, объекты, массивы, отдаютfalse.
Number.isInteger(1) //true
Number.isInteger(-237) //true
Number.isInteger(0) //true
Number.isInteger(0.2) //false
Number.isInteger('Flavio') //false
Number.isInteger(true) //false
Number.isInteger({}) //false
Number.isInteger([1, 2, 3]) //falseisNaN()
NaNэто особый случай. Число являетсяNaN, только если оноNaNили если это выражения деления ноль на ноль, что отдаётNaN. Во всех других случаях мы можем передать ему что захотим, но получимfalse:
Number.isNaN(NaN) //true
Number.isNaN(0 / 0) //true
Number.isNaN(1) //false
Number.isNaN('Flavio') //false
Number.isNaN(true) //false
Number.isNaN({}) //false
Number.isNaN([1, 2, 3]) //falseisSafeInteger()
Число может удовлетворятьNumber.isInteger(), но неNumber.isSafeInteger(), если оно заходит за пределы безопасных целых чисел.
Так что, всё что выше 2⁵³ и ниже -2⁵³ не является безопасным.
Number.isSafeInteger(Math.pow(2, 53)) // false
Number.isSafeInteger(Math.pow(2, 53) - 1) // true
Number.isSafeInteger(Math.pow(2, 53) + 1) // false
Number.isSafeInteger(-Math.pow(2, 53)) // false
Number.isSafeInteger(-Math.pow(2, 53) - 1) // false
Number.isSafeInteger(-Math.pow(2, 53) + 1) // trueparseFloat()
Парсит аргумент как дробное число и отдаёт его. Аргумент при этом является строкой:
Number.parseFloat('10') //10
Number.parseFloat('10.00') //10
Number.parseFloat('237,21') //237
Number.parseFloat('237.21') //237.21
Number.parseFloat('12 34 56') //12
Number.parseFloat(' 36 ') //36
Number.parseFloat('36 is my age') //36
Number.parseFloat('-10') //-10
Number.parseFloat('-10.2') //-10.2Как вы видитеNumber.parseFloat()довольно гибок. Он также может конвертировать строки со словами, выделяя только первое число, но в этом случае строка должна начинаться с числа:
Number.parseFloat('I am Flavio and I am 36') //NaNparseInt()
Парсит аргумент как целое число и отдаёт его:
Number.parseInt('10') //10
Number.parseInt('10.00') //10
Number.parseInt('237,21') //237
Number.parseInt('237.21') //237
Number.parseInt('12 34 56') //12
Number.parseInt(' 36 ') //36
Number.parseInt('36 is my age') //36Как вы видитеNumber.parseInt()тоже гибок. Он также может конвертировать строки со словами, выделяя первое число, строка должна начинаться с числа.
Number.parseInt('I am Flavio and I am 36') //NaNВы можете передать второй параметр, чтобы указать систему счисления. Десятичная стоит по-дефолту, но вы можете применять восьмеричные и шестнадцатеричные числовые конверсии:
Number.parseInt('10', 10) //10
Number.parseInt('010') //10
Number.parseInt('010', 8) //8
Number.parseInt('10', 8) //8
Number.parseInt('10', 16) //16Получи бесплатный курс👇
