![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_JSuONO5pkEkHrtlPbayDUQ.png\")
В этой статье, а скорее памятке, вы найдете все самые необходимые методы для работы со строками и числами (за исключением Math)в JavaScript, которые нужно просто знать, чтобы не городить огородов, а воспользоваться методами, доступными “из коробки”.
У объекта String есть один статический метод, String.fromCharCode(), который обычно используют для создания строкового представления последовательности Unicode символов. В этом примере мы делаем простую строку с использованием ASCII кодов:
String.fromCodePoint(70, 108, 97, 118, 105, 111) //'Flavio'Вы также можете использовать восьмеричные и шестнадцатеричные числа:
\n\n\n\nString.fromCodePoint(0x46, 0154, parseInt(141, 8), 118, 105, 111) //'Flavio'Все другие, описанные ниже методы, это методы “из коробки”, которые работают на строках.
\n\n\n\nОтдаёт символ под заданным индексом i.
Примеры:
\n\n\n\n'Flavio'.charAt(0) //'F'\n'Flavio'.charAt(1) //'l'\n'Flavio'.charAt(2) //'a'Если вы зададите индекс, который не подходит по строке, то на выходе вы получите уже пустую строку.
\n\n\n\nВ JavaScript нет типа char, так что char это строка с длиной 1.
Отдаёт код символа под индексом i. Как и с charAt(), отдаёт Unicode 16-битное целое число, представляющее символ:
'Flavio'.charCodeAt(0) //70\n'Flavio'.charCodeAt(1) //108\n'Flavio'.charCodeAt(2) //97Вызов toString() после него, отдаст шестнадцатеричное число, которое вы можете найти в любой Unicode таблице, такой как эта.
Этот метод был представлен уже в ES2015, чтобы работать с Unicode символами, которые не могут быть представлены как единичная 16-ти битная Unicode единица и которым вместо этого нужно их две.
\n\n\n\nИспользуя charCodeAt(), вам надо получить первый и второй, и затем совместить их. Используя codePointAt() вы получаете весь символ в одном запросе.
К примеру, этот китайский символ “𠮷” состоит из двух UTF-16 частей:
\n\n\n\n\"𠮷\".charCodeAt(0).toString(16) //d842\n\"𠮷\".charCodeAt(1).toString(16) //dfb7Комбинируем эти два unicode символа:
\n\n\n\n\"\\ud842\\udfb7\" //\"𠮷\"Вы можете получить тот же результат, но только используя codePointAt():
\"𠮷\".codePointAt(0) //20bb7Если вы создаете новый символ, комбинируя эти unicode символы:
\n\n\n\n\"\\u{20bb7}\" //\"𠮷\"Объединяет актуальную строку со строкой str.
Пример:
\n\n\n\n'Flavio'.concat(' ').concat('Copes') //'Flavio Copes'Вы можете указывать сколько угодно аргументов и в таком случае, все эти аргументы будут объединены в строку.
\n\n\n\n'Flavio'.concat(' ', 'Copes') //'Flavio Copes'Проверяет заканчивается ли строка со значением другой строки str.
'JavaScript'.endsWith('Script') //true\n'JavaScript'.endsWith('script') //falseВы можете передать второй параметр с целым числом и endWith() будет рассматривать оригинальную строку, как если бы она этой заданной длины:
'JavaScript'.endsWith('Script', 5) //false\n'JavaScript'.endsWith('aS', 5) //trueПроверяет есть ли в строке значение строки str.
'JavaScript'.includes('Script') //true\n'JavaScript'.includes('script') //false\n'JavaScript'.includes('JavaScript') //true\n'JavaScript'.includes('aSc') //true\n'JavaScript'.includes('C++') //falseincludes() также принимает второй опциональный параметр, целое число, которое указывает на позицию с которой начинать поиск.
'a nice string'.includes('nice') //true\n'a nice string'.includes('nice', 3) //false\n'a nice string'.includes('nice', 2) //trueДаёт позицию начала заданной строки str в строке, на которой применяется метод.
'JavaScript'.indexOf('Script') //4\n'JavaScript'.indexOf('JavaScript') //0\n'JavaScript'.indexOf('aSc') //3\n'JavaScript'.indexOf('C++') //-1Вы можете передать второй параметр, чтобы указать точку старта:
\n\n\n\n'a nice string'.indexOf('nice') !== -1 //true\n'a nice string'.indexOf('nice', 3) !== -1 //false\n'a nice string'.indexOf('nice', 2) !== -1 //trueДаёт позицию последнего появления строки str в актуальной строке.
Отдаёт -1, если поисковая строка не найдена.
'JavaScript is a great language. Yes I mean JavaScript'.lastIndexOf('Script') //47\n'JavaScript'.lastIndexOf('C++') //-1Этот метод сравнивает строки и возвращает число (отрицательное или положительное), которое говорит, является ли данная строка меньше, равной или больше, чем строка переданная как аргумент, но в зависимости от языка.
\n\n\n\nЯзык определяется настоящим местоположением или вы можете указать его, как второй аргумент:
\n\n\n\n'a'.localeCompare('à') //-1\n'a'.localeCompare('à', 'it-IT') //-1Очень часто его используют для сортировки массивов:
\n\n\n\n['a', 'b', 'c', 'd'].sort((a, b) => a.localeCompare(b))Где бы вы обычно использовали:
\n\n\n\n['a', 'b', 'c', 'd'].sort((a, b) => (a > b) ? 1 : -1)Только тут мы можем это сделать с помощью localeCompare(), который позволит нам работать с алфавитами по всему миру.
\n\n\n\nОбъект переданный как третий аргумент, может быть использован для передачи дополнительных условий. Посмотрите все возможные значения для этих условий на MDN.
\n\n\n\nА вот работа с регулярными выражениями RegEx.
\n\n\n\n'Hi Flavio'.match(/avio/)\n// Array [ 'avio' ]\n\n'Test 123123329'.match(/\\d+/)\n// Array [ \"123123329\" ]\n\n'hey'.match(/(hey|ho)/)\n//Array [ \"hey\", \"hey\" ]\n\n'123s'.match(/^(\\d{3})(\\w+)$/)\n//Array [ \"123s\", \"123\", \"s\" ]\n\n'123456789'.match(/(\\d)+/)\n//Array [ \"123456789\", \"9\" ]\n\n'123s'.match(/^(\\d{3})(?:\\s)(\\w+)$/)\n//null\n\n'123 s'.match(/^(\\d{3})(?:\\s)(\\w+)$/)\n//Array [ \"123 s\", \"123\", \"s\" ]\n\n'I saw a bear'.match(/\\bbear/) //Array [\"bear\"]\n\n'I saw a beard'.match(/\\bbear/) //Array [\"bear\"]\n\n'I saw a beard'.match(/\\bbear\\b/) //null\n\n'cool_bear'.match(/\\bbear\\b/) //nullВ Unicode есть четыре главные формы нормализации. Их коды это NFC, NFD, NFKC и NFKD. На Википедии есть хорошая статья про это.
Метод normalize() возвращает строку, нормализованную в соответствии с указанной формой, которую вы передаёте как параметр. (NFC используется как стандарт, если она не указана в ручную).
Вот пример с MDN:
\n\n\n\n'\\u1E9B\\u0323'.normalize() //ẛ̣\n'\\u1E9B\\u0323'.normalize('NFD') //ẛ̣\n'\\u1E9B\\u0323'.normalize('NFKD') //ṩ\n'\\u1E9B\\u0323'.normalize('NFKC') //ṩСмысл этого метода в том, чтобы добавлять в строку символы и пробелы, пока она не достигнет заданной длины.
\n\n\n\npadEnd() был представлен в ES2017, как метод добавляющий символы в конец строки.
\n\n\n\npadEnd(targetLength [, padString])Простое применение:
\n\n\n\nСмысл этого метода в том, чтобы добавлять строки или символы как в предыдущем методе, но уже с самого начала строки:
\n\n\n\npadStart(targetLength [, padString])![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_LeXUASRJJwHSpxc8fn02PA.png\")
Этот метод был представлен в ES2015 и повторяет строки заданное количество раз:
\n\n\n\n'Ho'.repeat(3) //'HoHoHo'Отдает пустую строку, если параметр не указан или параметр равен нулю. А в случае с отрицательным числом вы получите RangeError.
\n\n\n\nЭтот метод находит первое упоминание str1 в заданной строке и заменяет его на str2.
Отдаёт новую строку, не трогая оригинальную.
\n\n\n\n'JavaScript'.replace('Java', 'Type') //'TypeScript'Вы можете передать регулярное выражение как первый аргумент:
\n\n\n\n'JavaScript'.replace(/Java/, 'Type') //'TypeScript'replace() заменяет только первое упоминание, но а если вы будете использовать regex как поиск строки, то вы можете использовать (/g):
'JavaScript JavaX'.replace(/Java/g, 'Type') //'TypeScript TypeX'Второй параметр может быть функцией. Эта функция будет вызвана с заданным количеством аргументов, когда найдётся совпадение (или каждое совпадение в случае с regex /g):
Отдающееся значение функции заменит совпадающую часть строки.
\n\n\n\nПример:
\n\n\n\n'JavaScript'.replace(/Java/, (match, index, originalString) => {\n console.log(match, index, originalString)\n return 'Test'\n}) //TestScriptЭто работает и для обычных строк, а не только для регулярок:
\n\n\n\n'JavaScript'.replace('Java', (match, index, originalString) => {\n console.log(match, index, originalString)\n return 'Test'\n}) //TestScriptВ случае c regex, когда выбираются группы, все эти значения будут переданы как аргументы прямо после параметра совпадения.
\n\n\n\n'2015-01-02'.replace(/(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})/, (match, year, month, day, index, originalString) => {\n console.log(match, year, month, day, index, originalString)\n return 'Test'\n}) //TestОтдаёт расположение первого совпадения строки str в заданной строке.
Этот метод отдаёт индекс начала упоминания или -1, если такого не было найдено.
'JavaScript'.search('Script') //4\n'JavaScript'.search('TypeScript') //-1Вы можете использовать регулярные выражения (и на самом деле, даже если вы передаёте строку, то внутренне оно тоже применяется как регулярное выражение).
\n\n\n\n'JavaScript'.search(/Script/) //4\n'JavaScript'.search(/script/i) //4\n'JavaScript'.search(/a+v/) //1В этой статье подробно рассказывается про метод slice() и его родственников.
\n\n\n\nОтдает новую строку, которая является частью строки на которой применялся метод, от позиций begin до end.
Оригинальная строка не изменяется.
\n\n\n\nend опциональна.
'This is my car'.slice(5) //is my car\n'This is my car'.slice(5, 10) //is myЕсли вы выставите первым параметром отрицательное число, то начальный индекс будет считаться с конца и второй параметр тоже должен быть отрицательным, всегда ведя отсчет с конца:
\n\n\n\n'This is my car'.slice(-6) //my car\n'This is my car'.slice(-6, -4) //myЭтот метод вырезает строку при её нахождении в строке на которой применяется метод (чувствительный к регистру) и отдаёт массив с токенами.
\n\n\n\nconst phrase = 'I love my dog! Dogs are great'\nconst tokens = phrase.split('dog')\n\ntokens //[\"I love my \", \"! Dogs are great\"]Проверяет начинается ли строка со значения str.
Вы можете вызвать startWith() на любой строке, указать подстроку и проверить отдаёт результат true или false.
'testing'.startsWith('test') //true\n'going on testing'.startsWith('test') //falseЭтот метод допускает второй параметр, который позволит вам указать с какого символа вам надо начать проверку:
\n\n\n\n'testing'.startsWith('test', 2) //false\n'going on testing'.startsWith('test', 9) //trueЭтот метод отдаёт новую строку, которая представляет собой изначальную строку в нижнем регистре, в соответствии с нормами разметки указанной локали.
\n\n\n\nСобственно, первый параметр представляет локаль, но он опционален. Если его пропустить, то будет использоваться актуальная локаль:
\n\n\n\n'Testing'.toLocaleLowerCase() //'testing'\n'Testing'.toLocaleLowerCase('it') //'testing'\n'Testing'.toLocaleLowerCase('tr') //'testing'Как и всегда, мы можем не осознавать все преимущества интернационализации, но я читал на MDN, что правила разметки текста в турецком языке отличаются от других языков, чьё описание основано на латинице.
\n\n\n\nВ общем, это как и toLowerCase(), но с учетом локали.
Этот метод отдаёт новую строку, которая представляет собой изначальную строку в верхнем регистре, в соответствии с нормами разметки указанной локали.
\n\n\n\nПервым параметром указывается локаль, но это опционально, как и в случае с методом выше:
\n\n\n\n'Testing'.toLocaleUpperCase() //'TESTING'\n'Testing'.toLocaleUpperCase('it') //'TESTING'\n'Testing'.toLocaleUpperCase('tr') //'TESTİNG'Этот метод отдаёт новую строку с текстом в нижнем регистре.
\n\n\n\nНе изменяет изначальную строку.
\n\n\n\nНе принимает параметры.
\n\n\n\nИспользование:
\n\n\n\n'Testing'.toLowerCase() //'testing'Работает как и toLocaleLowerCase(), но не учитывает локали.
Отдает строку из заданного строчного объекта.
\n\n\n\nconst str = new String('Test')\nstr.toString() //'Test'Отдаёт новую строку с текстом в верхнем регистре.
\n\n\n\nНе изменяет оригинальную строку.
\n\n\n\nНе принимает параметры.
\n\n\n\nИспользование:
\n\n\n\n'Testing'.toUpperCase() //'TESTING'Если вы передадите пустую строку, то он возвратит пустую строку.
\n\n\n\nМетод похож на toLocaleUpperCase(), но не принимает параметры.
Отдает новую строку удаляя пробелы вначале и в конце оригинальной строки.
\n\n\n\n'Testing'.trim() //'Testing'\n' Testing'.trim() //'Testing'\n' Testing '.trim() //'Testing'\n'Testing '.trim() //'Testing'Отдаёт новую строку, удаляя пробелы только из конца оригинальной строки.
\n\n\n\n'Testing'.trimEnd() //'Testing'\n' Testing'.trimEnd() //' Testing'\n' Testing '.trimEnd() //' Testing'\n'Testing '.trimEnd() //'Testing'Отдаёт новую строку, удаляя пробелы из начала оригинальной строки.
\n\n\n\n'Testing'.trimStart() //'Testing'\n' Testing'.trimStart() //'Testing'\n' Testing '.trimStart() //'Testing '\n'Testing'.trimStart() //'Testing'Отдает строчное представление заданного строчного объекта:
\n\n\n\nconst str = new String('Test')\nstr.valueOf() //'Test'Это тоже самое, что и toString()
\n\n\n\nТеперь пройдемся по числовым методам.
Отдаст true, если переданное значение является целым числом. Всё иное, такое как, логические значения, строки, объекты, массивы, отдают false.
Number.isInteger(1) //true\nNumber.isInteger(-237) //true\nNumber.isInteger(0) //true\n\nNumber.isInteger(0.2) //false\nNumber.isInteger('Flavio') //false\nNumber.isInteger(true) //false\nNumber.isInteger({}) //false\nNumber.isInteger([1, 2, 3]) //falseNaN это особый случай. Число является NaN, только если оно NaN или если это выражения деления ноль на ноль, что отдаёт NaN. Во всех других случаях мы можем передать ему что захотим, но получим false:
Number.isNaN(NaN) //true\nNumber.isNaN(0 / 0) //true\n\nNumber.isNaN(1) //false\nNumber.isNaN('Flavio') //false\nNumber.isNaN(true) //false\nNumber.isNaN({}) //false\nNumber.isNaN([1, 2, 3]) //falseЧисло может удовлетворять Number.isInteger(), но не Number.isSafeInteger(), если оно заходит за пределы безопасных целых чисел.
Так что, всё что выше 2⁵³ и ниже -2⁵³ не является безопасным.
\n\n\n\nNumber.isSafeInteger(Math.pow(2, 53)) // false\nNumber.isSafeInteger(Math.pow(2, 53) - 1) // true\nNumber.isSafeInteger(Math.pow(2, 53) + 1) // false\nNumber.isSafeInteger(-Math.pow(2, 53)) // false\nNumber.isSafeInteger(-Math.pow(2, 53) - 1) // false\nNumber.isSafeInteger(-Math.pow(2, 53) + 1) // trueПарсит аргумент как дробное число и отдаёт его. Аргумент при этом является строкой:
\n\n\n\nNumber.parseFloat('10') //10\nNumber.parseFloat('10.00') //10\nNumber.parseFloat('237,21') //237\nNumber.parseFloat('237.21') //237.21\nNumber.parseFloat('12 34 56') //12\nNumber.parseFloat(' 36 ') //36\nNumber.parseFloat('36 is my age') //36\n\nNumber.parseFloat('-10') //-10\nNumber.parseFloat('-10.2') //-10.2Как вы видите Number.parseFloat() довольно гибок. Он также может конвертировать строки со словами, выделяя только первое число, но в этом случае строка должна начинаться с числа:
Number.parseFloat('I am Flavio and I am 36') //NaNПарсит аргумент как целое число и отдаёт его:
\n\n\n\nNumber.parseInt('10') //10\nNumber.parseInt('10.00') //10\nNumber.parseInt('237,21') //237\nNumber.parseInt('237.21') //237\nNumber.parseInt('12 34 56') //12\nNumber.parseInt(' 36 ') //36\nNumber.parseInt('36 is my age') //36Как вы видите Number.parseInt() тоже гибок. Он также может конвертировать строки со словами, выделяя первое число, строка должна начинаться с числа.
Number.parseInt('I am Flavio and I am 36') //NaNВы можете передать второй параметр, чтобы указать систему счисления. Десятичная стоит по-дефолту, но вы можете применять восьмеричные и шестнадцатеричные числовые конверсии:
\n\n\n\nNumber.parseInt('10', 10) //10\nNumber.parseInt('010') //10\nNumber.parseInt('010', 8) //8\nNumber.parseInt('10', 8) //8\nNumber.parseInt('10', 16) //16В этой статье, а скорее памятке, вы найдете все самые необходимые методы для работы со строками и числами (за исключением Math)в JavaScript, которые нужно просто знать, чтобы не городить огородов, а воспользоваться методами, доступными “из коробки”.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/samieneobkjfnk.jpg"},"interesting":[{"title":"Понимаем немедленно вызываемые функции IIFE и немного больше","slug":"ponimaem-nemedlenno-vyzyvaemie-funkcii-iife-i-nemnogo-bolshe","type":"js"},{"title":"Всё, что нужно знать об async/await. Циклы, контроль потоков, ограничения","slug":"vse-chto-nuzhno-znat-ob-async-await-tsikly-kontrol-potokov-ogranicheniya","type":"js"},{"title":"5 распространенных ошибок, которые делает каждый новый программист в JavaScript","slug":"5-rasprostranennyh-oshibok-kotorie-delaet-kazhdyi-novyi-programmist-v-javascript","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}