Работа со строками в javascript
Содержание:
- Читайте также:
- Строковые функции
- Найти все / Заменить все
- Квадратные скобки
- Блоки кода и циклы, IIFE
- Спецсимволы
- Нюансы сравнения строк
- Backreferences в паттерне и при замене
- Январь 2015
- Обратные символьные классы
- Использование методов и свойств строк
- Изменение прокрутки: scrollTo, scrollBy, scrollIntoView
- JS Уроки
- Преобразовываем в строку
- Неточные вычисления
- Риком-Траст
- Наши Услуги
- Работа с подстроками
- Сравнение различных типов
- [] и charAt
- Условное выделение ячеек
- Число
- Частые вопросы по стихам и песне
- Строковые методы, поиск и замена
- Задачи для решения
Читайте также:
Строковые функции
Строковые функции (методы) упрощают работу со строками в JavaScript. Давайте посмотрим, как происходит изменение регистра с помощью строковых функций. К примеру с помощью функций toLowerCase() и toUpperCase() мы можем изменить регистр символов следующим образом:
alert( 'Interface'.toUpperCase() ); // INTERFACE alert( 'Interface'.toLowerCase() ); // interface
Также при необходимости мы можем выполнить перевод в нижний регистр и для какого-нибудь определённого символа:
alert( 'Interface'toLowerCase() ); // 'i'
Подробнее о строковых функциях поговорим в следующий раз. В частности, рассмотрим, как осуществляется поиск в строке и как работать с подстрокой. Следите за новостями!
При подготовке статьи использовались следующие материалы:
— «Строки»;
— «JavaScript. Строковые методы».
Найти все / Заменить все
Эти две задачи решаются в javascript принципиально по-разному.
Начнём с «простого».
Для замены всех вхождений используется метод String#replace.
Он интересен тем, что допускает первый аргумент – регэксп или строку.
Если первый аргумент – строка, то будет осуществлён поиск подстроки, без преобразования в регулярное выражение.
Попробуйте:
Как видите, заменился только один плюс, а не оба.
Чтобы заменить все вхождения, String#replace обязательно нужно использовать с регулярным выражением.
В режиме регулярного выражения плюс придётся экранировать, но зато заменит все вхождения (при указании флага ):
Вот такая особенность работы со строкой.
Очень полезной особенностью является возможность работать с функцией вместо строки замены. Такая функция получает первым аргументом – все совпадения, а последующими аргументами – скобочные группы.
Следующий пример произведёт операции вычитания:
В javascript нет одного универсального метода для поиска всех совпадений.
Для поиска без запоминания скобочных групп – можно использовать String#match:
Как видите, оно исправно ищет все совпадения (флаг у регулярного выражения обязателен), но при этом не запоминает скобочные группы. Эдакий «облегчённый вариант».
В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов RegExp#exec.
Для этого регулярное выражение должно использовать флаг . Тогда результат поиска, запомненный в свойстве объекта используется как точка отсчёта для следующего поиска:
Проверка нужна т.к. значение является хорошим и означает, что вхождение найдено в самом начале строки (поиск успешен). Поэтому необходимо сравнивать именно с .
Квадратные скобки
Для свойств, имена которых состоят из нескольких слов, доступ к значению «через точку» не работает:
JavaScript видит, что мы обращаемся к свойству , а затем идёт непонятное слово . В итоге синтаксическая ошибка.
Точка требует, чтобы ключ был именован по правилам именования переменных. То есть не имел пробелов, не начинался с цифры и не содержал специальные символы, кроме и .
Для таких случаев существует альтернативный способ доступа к свойствам через квадратные скобки. Такой способ сработает с любым именем свойства:
Сейчас всё в порядке
Обратите внимание, что строка в квадратных скобках заключена в кавычки (подойдёт любой тип кавычек)
Квадратные скобки также позволяют обратиться к свойству, имя которого может быть результатом выражения. Например, имя свойства может храниться в переменной:
Здесь переменная может быть вычислена во время выполнения кода или зависеть от пользовательского ввода. После этого мы используем её для доступа к свойству. Это даёт нам большую гибкость.
Пример:
Запись «через точку» такого не позволяет:
Мы можем использовать квадратные скобки в литеральной нотации для создания вычисляемого свойства.
Пример:
Смысл вычисляемого свойства прост: запись означает, что имя свойства необходимо взять из переменной .
И если посетитель введёт слово , то в объекте теперь будет лежать свойство .
По сути, пример выше работает так же, как и следующий пример:
…Но первый пример выглядит лаконичнее.
Мы можем использовать и более сложные выражения в квадратных скобках:
Квадратные скобки дают намного больше возможностей, чем запись через точку. Они позволяют использовать любые имена свойств и переменные, хотя и требуют более громоздких конструкций кода.
Подведём итог: в большинстве случаев, когда имена свойств известны и просты, используется запись через точку. Если же нам нужно что-то более сложное, то мы используем квадратные скобки.
Блоки кода и циклы, IIFE
Предыдущие примеры сосредоточены на функциях. Но лексическое окружение существует для любых блоков кода .
Лексическое окружение создаётся при выполнении блока кода и содержит локальные переменные для этого блока. Вот пара примеров.
В следующем примере переменная существует только в блоке :
Когда выполнение попадает в блок , для этого блока создаётся новое лексическое окружение.
У него есть ссылка на внешнее окружение, так что может быть найдена. Но все переменные и Function Expression, объявленные внутри , остаются в его лексическом окружении и не видны снаружи.
Например, после завершения следующий не увидит , что вызовет ошибку.
Для цикла у каждой итерации своё отдельное лексическое окружение. Если переменная объявлена в , то она также в нём:
Обратите внимание: визуально находится снаружи. Но конструкция – особенная в этом смысле, у каждой итерации цикла своё собственное лексическое окружение с текущим в нём
И так же, как и в , ниже цикла невидима.
Мы также можем использовать «простые» блоки кода , чтобы изолировать переменные в «локальной области видимости».
Например, в браузере все скрипты (кроме ) разделяют одну общую глобальную область. Так что, если мы создадим глобальную переменную в одном скрипте, она станет доступна и в других. Но это становится источником конфликтов, если два скрипта используют одно и то же имя переменной и перезаписывают друг друга.
Это может произойти, если название переменной – широко распространённое слово, а авторы скрипта не знают друг о друге.
Если мы хотим этого избежать, мы можем использовать блок кода для изоляции всего скрипта или какой-то его части:
Из-за того, что у блока есть собственное лексическое окружение, код снаружи него (или в другом скрипте) не видит переменные этого блока.
В прошлом в JavaScript не было лексического окружения на уровне блоков кода.
Так что программистам пришлось что-то придумать. И то, что они сделали, называется «immediately-invoked function expressions» (аббревиатура IIFE), что означает функцию, запускаемую сразу после объявления.
Это не то, что мы должны использовать сегодня, но, так как вы можете встретить это в старых скриптах, полезно понимать принцип работы.
IIFE выглядит так:
Здесь создаётся и немедленно вызывается Function Expression. Так что код выполняется сразу же и у него есть свои локальные переменные.
Function Expression обёрнуто в скобки , потому что, когда JavaScript встречает в основном потоке кода, он воспринимает это как начало Function Declaration. Но у Function Declaration должно быть имя, так что такой код вызовет ошибку:
Даже если мы скажем: «хорошо, давайте добавим имя», – это не сработает, потому что JavaScript не позволяет вызывать Function Declaration немедленно.
Так что, скобки вокруг функции – это трюк, который позволяет показать JavaScript, что функция была создана в контексте другого выражения, и, таким образом, это функциональное выражение: ей не нужно имя и её можно вызвать немедленно.
Кроме скобок, существуют и другие пути показать JavaScript, что мы имеем в виду Function Expression:
Во всех перечисленных случаях мы объявляем Function Expression и немедленно выполняем его. Ещё раз заметим, что в настоящий момент нет необходимости писать подобный код.
Спецсимволы
Если мы применяем одинарные либо двойные кавычки, мы тоже можем создавать многострочные строки. Для этого понадобится символ перевода строки \n:
let guestList = "Guests:\n * Bob\n * Petr\n * Maria"; alert(guestList); // список гостей из нескольких строк
Две строки ниже являются эквивалентными. Разница в том, что они по-разному записаны:
// используем спецсимвол перевода строки let str1 = "Hello\nWorld"; // используем обратные кавычки let str2 = `Hello World`; alert(str1 == str2); // true
Существует и масса других спецсимволов:
Рассмотрим парочку примеров с Юникодом:
// alert( "\u00A9" ); // Длинные коды // 佫, редкий китайский иероглиф alert( "\u{20331}" ); // , улыбающийся смайлик с глазами-сердечками alert( "\u{1F60D}" );
Как правило, спецсимволы начинаются с символа экранирования, представляющего собой обратный слеш \. Его можно использовать и для того, чтобы вставлять в строки кавычки:
alert( 'I\'m the God!' ); // I'm the God!
Но экранировать нужно только тогда, когда внутри строки мы используем такие же кавычки, в которые эта самая строка заключена. Таким образом, можно поступать проще:
alert( `I'm the Walrus!` ); // I'm the Walrus!
Как видите, мы поместили строку в косые кавычки, а раздели I’m одинарной кавычкой. Просто и элегантно.
Кстати, если вдруг потребуется добавить в нашу строку сам обратный слеш, то мы экранируем его вторым обратным слешем:
alert( `The backslash: \\` ); // The backslash: \
Нюансы сравнения строк
Если мы
проверяем строки на равенство, то никаких особых проблем в JavaScript это не
вызывает, например:
if("abc" == "abc") console.log( "строки равны" ); if("abc" != "ABC") console.log( "строки не равны" );
Но, когда мы
используем знаки больше/меньше, то строки сравниваются в лексикографическом
порядке. То есть:
1. Если код
текущего символа одной строки больше кода текущего символа другой строки, то
первая строка больше второй (остальные символы не имеют значения), например:
console.log( "z" > "Za" ); //true
2. Если код
текущего символа одной строки меньше кода текущего символа другой строки, то
первая строка меньше второй:
console.log( "B" < "a" ); //true
3. При равенстве
символов больше та строка, которая содержит больше символов:
console.log( "abc" < "abcd" ); //true
4. В остальных
случаях строки равны:
console.log( "abc" == "abc" ); //true
Но в этом
алгоритме есть один нюанс. Например, вот такое сравнение:
console.log( "Америка" > "Japan" ); //true
Дает значение true, так как
русская буква A имеет больший
код, чем латинская буква J. В этом легко убедиться,
воспользовавшись методом
str.codePointAt(pos)
который
возвращает код символа, стоящего в позиции pos:
console.log( "А".codePointAt(), "J".codePointAt() );
Сморите, у буквы
А код равен 1040, а у буквы J – 74. Напомню,
что строки в JavaScript хранятся в
кодировке UTF-16. К чему
может привести такой результат сравнения? Например, при сортировке мы получим
на первом месте страну «Japan», а потом «Америка». Возможно, это не
то, что нам бы хотелось? И здесь на помощь приходит специальный метод для
корректного сравнения таких строк:
str.localeCompare(compareStr)
он возвращает
отрицательное число, если str < compareStr, положительное
при str > compareStr и 0 если строки
равны. Например:
console.log( "Америка".localeCompare("Japan") ); // -1
возвращает -1
как и должно быть с учетом языкового сравнения. У этого метода есть два
дополнительных аргумента, которые указаны в документации JavaScript. Первый
позволяет указать язык (по умолчанию берётся из окружения) — от него зависит
порядок букв. Второй позволяет определять дополнительные правила, например, чувствительность
к регистру.
Backreferences в паттерне и при замене
Иногда нужно в самом паттерне поиска обратиться к предыдущей его части.
Например, при поиске BB-тагов, то есть строк вида , и . Или при поиске атрибутов, которые могут быть в одинарных кавычках или двойных.
Обращение к предыдущей части паттерна в javascript осуществляется как \1, \2 и т.п., бэкслеш + номер скобочной группы:
Обращение к скобочной группе в строке замены идёт уже через доллар: . Не знаю, почему, наверное так удобнее…
P.S. Понятно, что при таком способе поиска bb-тагов придётся пропустить текст через замену несколько раз – пока результат не перестанет отличаться от оригинала.
Январь 2015
Заработок
Полагаю, именно за этим все мы здесь и собрались. Большинство цифр – это примерные значения, так как сайты подсчитывают выплаты через несколько месяцев, однако текущие данные более или менее точны.
- Чаевые: $716.88
- Подписчики в Twitch: $212.50
- Доход от рекламы в Twitch: $61.92
- Кастинг с Basetrade: $44
- Доход от рекламы на YouTube: $12.49
Итого: $1048
Цифры/Прогресс
У меня есть данные предыдущих месяцев, а в следующем отчете я смогу сравнить результаты с текущим месяцем. Итак, вот чем я располагаю на сегодняшний день:
- Подписчики в Twitch: 86, не уверен, сколько было в начале месяца
- Фолловеры в Twitch: 5792, +1025 в январе
- Среднее количество конкурентов в Twitch: 165~ Сложно об этом судить, так как не предоставляет подобную статистику, а просто отображает график. Данные были взяты на сайте Fuzic.nl и могут не соответствовать действительности.
- Просмотры на YouTube: всего 753218, +21663 в январе
- Подписчики на YouTube: 7125, +135 в январе
- Фолловеры в Twitter: 1870, не уверен, сколько было в начале
- Фолловеры в Facebook: 461, не уверен, сколько было в начале (честно говоря, я редко пользуюсь Facebook)
Анализ
Январь удался в плане времени, вложенного в стриминг. С другой стороны, пострадало много других важных для меня вещей, в частности, здоровье. Как я уже говорил, создание контента для YouTube в январе начало заметно хромать, так как я был истощен после длительных ежедневных стримов. В феврале это изменится. Ролики на YouTube очень важны, в особенности, для более широкой аудитории, так как короткое видео может развлечь или чему-то обучить за гораздо меньшее время. Мои планы: меньше времени на стримы, новый график для повышения качества сна и принятие окончательного решения по поводу Heroes of the Storm (кастинг, игра, проведение турниров и т.д.).
Вот, пожалуй, и все. Надеюсь, я помог вам составить представление о том, сколько в действительности зарабатывают стримеры. Возможно, все это поможет кому-то воплотить свою мечту в реальность.
Обратные символьные классы
Для каждого символьного класса существует «обратный класс», обозначаемый той же буквой, но в верхнем регистре.
«Обратный» означает, что он соответствует всем другим символам, например:
- Не цифра: любой символ, кроме , например буква.
- Не пробел: любой символ, кроме , например буква.
- Любой символ, кроме , то есть не буквы из латиницы, не знак подчёркивания и не цифра. В частности, русские буквы принадлежат этому классу.
Мы уже видели, как сделать чисто цифровой номер из строки вида : найти все цифры и соединить их.
Альтернативный, более короткий путь – найти нецифровые символы и удалить их из строки:
Использование методов и свойств строк
Для манипулирования строками в Javascript как и во многих других языках программирования предусмотрена возможность использования методов(объектных функций) , , , … и свойств , , … . Вызов методов и свойств осуществляется через оператор (точка). Вызов объектных функций может быть осуществлен не однократно, образуя тем самым цепочки методов.
var str = «Text»;
str.italics(); //Преобразование строки в курсив (<i>Text</i>)
//Цепочка методов (каждый метод вызывается из значения, которое возвратил предыдущий метод)
str.toUpperCase().big().bold() // Результат — <b><big>TEXT</big></b>
1 |
varstr=»Text»; str.italics();//Преобразование строки в курсив (<i>Text</i>) //Цепочка методов (каждый метод вызывается из значения, которое возвратил предыдущий метод) str.toUpperCase().big().bold()// Результат — <b><big>TEXT</big></b> |
Применение методов и свойств к простым строковым литералам невозможно, поэтому если интерпретатор видит вызов метода из строки, то он автоматически преобразует ее в объект и делает вызов метода или свойства уже из строки — объекта.
Важно заметить, что вызов метода не переопределяет строку, т.к. работает с ее копией и начальное значение строки остается неизменным
var str = » Random text written «; //удалим пробелы с начала и конца строки
str.trim(); //Результат — «Random text written»
str; //Само значение строки не изменилось — » Random text written »
1 |
varstr=» Random text written «;//удалим пробелы с начала и конца строки str.trim();//Результат — «Random text written» str;//Само значение строки не изменилось — » Random text written « |
Изменение прокрутки: scrollTo, scrollBy, scrollIntoView
Важно:
Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.
На обычных элементах свойства можно изменять, и при этом элемент будет прокручиваться.
Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой , а в указанных – использовать для этого . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.
Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).
-
Метод прокручивает страницу относительно текущих координат.
Например, кнопка ниже прокрутит страницу на вниз:
window.scrollBy(0,10)
-
Метод прокручивает страницу к указанным координатам относительно документа.
Он эквивалентен установке свойств .
Чтобы прокрутить в начало документа, достаточно указать координаты .
window.scrollTo(0,0)
JS Уроки
JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS ScopeJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS DebuggingJS HoistingJS Strict ModeJS this KeywordJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON
Преобразовываем в строку
Вы можете преобразовать число, булево значение или объект в строку.
Var myNumber = 24; // 24
var myString = myNumber.toString(); // «24»
Вы также можете совершить подобную манипуляцию при помощи функции
string()
.
Var myNumber = 24; // 24
var myString = String(myNumber); // «24»
Николас Закас говорит: «Если вы не уверены в значении (null
или
undefined), то используйте функцию
String()
, так как она возвращает строку в независимости от типа переменной».
undefined
означает, что переменной не присвоено никакого значения, a null
, — что ей присвоено пустое значение (можно сказать, что
null
определяется, как пустой объект).
Неточные вычисления
Внутри JavaScript число представлено в виде 64-битного формата IEEE-754. Для хранения числа используется 64 бита: 52 из них используется для хранения цифр, 11 из них для хранения положения десятичной точки (если число целое, то хранится 0), и один бит отведён на хранение знака.
Если число слишком большое, оно переполнит 64-битное хранилище, JavaScript вернёт бесконечность:
Наиболее часто встречающаяся ошибка при работе с числами в JavaScript – это потеря точности.
Посмотрите на это (неверное!) сравнение:
Да-да, сумма и не равна .
Странно! Что тогда, если не ?
Но почему это происходит?
Число хранится в памяти в бинарной форме, как последовательность бит – единиц и нулей. Но дроби, такие как , , которые выглядят довольно просто в десятичной системе счисления, на самом деле являются бесконечной дробью в двоичной форме.
Другими словами, что такое ? Это единица делённая на десять — , одна десятая. В десятичной системе счисления такие числа легко представимы, по сравнению с одной третьей: , которая становится бесконечной дробью .
Деление на гарантированно хорошо работает в десятичной системе, но деление на – нет. По той же причине и в двоичной системе счисления, деление на обязательно сработает, а становится бесконечной дробью.
В JavaScript нет возможности для хранения точных значений 0.1 или 0.2, используя двоичную систему, точно также, как нет возможности хранить одну третью в десятичной системе счисления.
Числовой формат IEEE-754 решает эту проблему путём округления до ближайшего возможного числа. Правила округления обычно не позволяют нам увидеть эту «крошечную потерю точности», но она существует.
Пример:
И когда мы суммируем 2 числа, их «неточности» тоже суммируются.
Вот почему – это не совсем .
Не только в JavaScript
Справедливости ради заметим, что ошибка в точности вычислений для чисел с плавающей точкой сохраняется в любом другом языке, где используется формат IEEE 754, включая PHP, Java, C, Perl, Ruby.
Можно ли обойти проблему? Конечно, наиболее надёжный способ — это округлить результат используя метод toFixed(n):
Также можно временно умножить число на 100 (или на большее), чтобы привести его к целому, выполнить математические действия, а после разделить обратно. Суммируя целые числа, мы уменьшаем погрешность, но она все равно появляется при финальном делении:
Таким образом, метод умножения/деления уменьшает погрешность, но полностью её не решает.
Забавный пример
Попробуйте выполнить его:
Причина та же – потеря точности. Из 64 бит, отведённых на число, сами цифры числа занимают до 52 бит, остальные 11 бит хранят позицию десятичной точки и один бит – знак. Так что если 52 бит не хватает на цифры, то при записи пропадут младшие разряды.
Интерпретатор не выдаст ошибку, но в результате получится «не совсем то число», что мы и видим в примере выше. Как говорится: «как смог, так записал».
Два нуля
Другим забавным следствием внутреннего представления чисел является наличие двух нулей: и .
Все потому, что знак представлен отдельным битом, так что, любое число может быть положительным и отрицательным, включая нуль.
В большинстве случаев это поведение незаметно, так как операторы в JavaScript воспринимают их одинаковыми.
Риком-Траст
Наши Услуги
Работа с подстроками
Рассмотрим javascript функции для работы с подстроками.
-
slice(start, ) — возвращает символы, между конкретных позиций.
let s = '0123456789'; let s_new = s.slice(0, 4); console.log(s_new); // 0123
Если второй параметр не указан, то вернет всё до конца строки.
-
substring(start, ) — работает аналогично. Отличие от «slice» в 2 моментах. Если стартовое значение больше конечного, то первая функция вернет пустую строку.
let s = '0123456789'; console.log(s.slice(6, 4)); // '' console.log(s.substring(6, 4)); // 45
Ещё различие в подходе при неверных параметрах.
let s = '0123456789'; console.log(s.slice(-4, -2)); // 67 console.log(s.substring(-4, -2)); // ''
Функция «slice()» конвертирует отрицательные значения в положительные, отталкиваясь от длины строки, а «substring()» просто устанавливает их в ноль, поэтому возвращает пустую строку.
-
substr(start, ) — возвращает подстроку, начиная с определенной позиции и определенной длины.
let s = '0123456789'; let s_new = s.substr(4, 3); console.log(s_new); // 456
Сравнение различных типов
Сравнение данных различных типов может привести к неожиданным результатам.
При сравнении строки с числом, JavaScript преобразует строку в число при выполнении сравнения. Пустая строка превращается в 0. нечисловая строка преобразуется в NaN , которое всегда ложно.
случай | Стоимость | Пытаться |
---|---|---|
2 < 12 | true | Попробуй » |
2 < «12» | true | Попробуй » |
2 < «John» | false | Попробуй » |
2 > «John» | false | Попробуй » |
2 == «John» | false | Попробуй » |
«2» < «12» | false | Попробуй » |
«2» > «12» | true | Попробуй » |
«2» == «12» | false | Попробуй » |
При сравнении двух строк, «2» будет больше, чем «12», так как (в алфавитном порядке) 1 меньше, чем 2.
Для обеспечения должного результата, переменные должны быть преобразованы в соответствующий тип перед сравнением:
age = Number(age);
if (isNaN(age)) {
voteable = «Error in input»;
} else {
voteable = (age < 18) ? «Too young» : «Old enough»;
}
[] и charAt
Из любой строки
можно взять отдельный символ. Это делается с помощью оператора [], в которых
указывается индекс нужного символа. Например:
let str = 'Hello!\nI\'m Javascript.'; let ch1 = str; let ch2 = str7; console.log(ch1, ch2); console.log(typeof ch1);
Обратите
внимание, что так как в JavaScript нет символьного типа, то
возвращаемое значение – это строка, состоящая из одного символа. Ту же самую
операцию выделения символа можно выполнить и с помощью метода charAt(pos), но он менее
удобен и существует, скорее по историческим причинам для совместимости со
старыми скриптами:
Ту же самую
операцию выделения символа можно выполнить и с помощью метода charAt(pos), но он менее
удобен и существует, скорее по историческим причинам для совместимости со
старыми скриптами:
let ch1 = str.charAt(); let ch2 = str.charAt(7);
Интересной особенностью
JavaScript является
возможность перебрать строку посимвольно с помощью цикла for of, используемого
для массивов:
for(let ch of "Hello") console.log(ch);
Обратите
внимание, что строки в JavaScript изменять нельзя. Например,
нельзя выполнить такую операцию:
str = "h";
получим ошибку
исполнения. Если нужно изменить строку, то создается новая измененная строка.
Условное выделение ячеек
Число
Числовой тип данных () представляет как целочисленные значения, так и числа с плавающей точкой.
Существует множество операций для чисел, например, умножение , деление , сложение , вычитание и так далее.
Кроме обычных чисел, существуют так называемые «специальные числовые значения», которые относятся к этому типу данных: , и .
-
представляет собой математическую ∞. Это особое значение, которое больше любого числа.
Мы можем получить его в результате деления на ноль:
Или задать его явно:
-
означает вычислительную ошибку. Это результат неправильной или неопределённой математической операции, например:
Значение «прилипчиво». Любая операция с возвращает :
Если где-то в математическом выражении есть , то результатом вычислений с его участием будет .
Математические операции – безопасны
Математические операции в JavaScript «безопасны». Мы можем делать что угодно: делить на ноль, обращаться с нечисловыми строками как с числами и т.д.
Скрипт никогда не остановится с фатальной ошибкой (не «умрёт»). В худшем случае мы получим как результат выполнения.
Специальные числовые значения относятся к типу «число». Конечно, это не числа в привычном значении этого слова.
Подробнее о работе с числами мы поговорим в главе Числа.
Частые вопросы по стихам и песне
Строковые методы, поиск и замена
Следующие методы работают с регулярными выражениями из строк.
Все методы, кроме replace, можно вызывать как с объектами типа regexp в аргументах, так и со строками, которые автоматом преобразуются в объекты RegExp.
Так что вызовы эквивалентны:
var i = str.search(/\s/) var i = str.search("\\s")
При использовании кавычек нужно дублировать \ и нет возможности указать флаги. Если регулярное выражение уже задано строкой, то бывает удобна и полная форма
var regText = "\\s" var i = str.search(new RegExp(regText, "g"))
Возвращает индекс регулярного выражения в строке, или -1.
Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод (аналогично RegExp-методы ). Чтобы получить больше информации, используйте более медленный метод (аналогичный методу ).
Этот пример выводит сообщение, в зависимости от того, подходит ли строка под регулярное выражение.
function testinput(re, str){ if (str.search(re) != -1) midstring = " contains "; else midstring = " does not contain "; document.write (str + midstring + re.source); }
Если в regexp нет флага , то возвращает тот же результат, что .
Если в regexp есть флаг , то возвращает массив со всеми совпадениями.
Чтобы просто узнать, подходит ли строка под регулярное выражение , используйте .
Если Вы хотите получить первый результат — попробуйте r.
В следующем примере используется, чтобы найти «Chapter», за которой следует 1 или более цифр, а затем цифры, разделенные точкой. В регулярном выражении есть флаг , так что регистр будет игнорироваться.
str = "For more information, see Chapter 3.4.5.1"; re = /chapter (\d+(\.\d)*)/i; found = str.match(re); alert(found);
Скрипт выдаст массив из совпадений:
- Chapter 3.4.5.1 — полностью совпавшая строка
- 3.4.5.1 — первая скобка
- .1 — внутренняя скобка
Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с . Будут найдены все буквы от А до Е и от а до е, каждая — в отдельном элементе массива.
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var regexp = //gi; var matches = str.match(regexp); document.write(matches); // matches =
Метод replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис — такой:
var newString = str.replace(regexp/substr, newSubStr/function)
- Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2
- Строка, которая будет заменена на .
- Строка, которая заменяет подстроку из аргумента номер 1.
- Функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).
Метод не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.
Чтобы осуществить глобальную замену, включите в регулярное выражение флаг .
Если первый аргумент — строка, то она не преобразуется в регулярное выражение, так что, например,
var ab = "a b".replace("\\s","..") // = "a b"
Вызов replace оставил строку без изменения, т.к искал не регулярное выражение , а строку «\s».
В строке замены могут быть такие спецсимволы:
Pattern | Inserts |
Вставляет «$». | |
Вставляет найденную подстроку. | |
Вставляет часть строки, которая предшествует найденному вхождению. | |
Вставляет часть строки, которая идет после найденного вхождения. | |
or | Где или — десятичные цифры, вставляет подстроку вхождения, запомненную -й вложенной скобкой, если первый аргумент — объект RegExp. |
Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.
В функции можно динамически генерировать и возвращать строку подстановки.
Первый параметр функции — найденная подстрока. Если первым аргументом является объект , то следующие параметров содержат совпадения из вложенных скобок. Последние два параметра — позиция в строке, на которой произошло совпадение и сама строка.
Например, следующий вызов возвратит XXzzzz — XX , zzzz.
function replacer(str, p1, p2, offset, s) { return str + " - " + p1 + " , " + p2; } var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)
Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра , .
Если бы были три скобки, то в функцию пришлось бы добавить параметр .
Следующая функция заменяет слова типа на :
function styleHyphenFormat(propertyName) { function upperToHyphenLower(match) { return '-' + match.toLowerCase(); } return propertyName.replace(//, upperToHyphenLower); }
Задачи для решения
Дана строка «js»
. Сделайте из нее строку «JS»
.
Дана строка «JS»
. Сделайте из нее строку «js»
.
Работа с length, substr, substring, slice. Работа с indexOf
Дана строка «я учу javascript!»
. Найдите количество символов
в этой строке.
Дана строка «я учу javascript!»
. Найдите позицию подстроки «учу»
.
Дана переменная str
, в которой хранится какой-либо текст.
Реализуйте обрезание длинного текста по следующему принципу:
если количество символов этого текста больше заданного в переменной n,
то в переменную result
запишем первые n
символов строки str
и добавим в конец троеточие «…».
В противном случае в переменную result
запишем содержимое переменной str
.
Работа с split
Дана строка «я учу javascript!»
.
С помощью метода split
запишите каждое слово
этой строки в отдельный
элемент массива.
Дана строка «я учу javascript!»
. С помощью метода split
запишите каждый символ этой строки в отдельный элемент массива.
В переменной date
лежит дата в формате «2025-12-31»
.
Преобразуйте эту дату в формат «31.12.2025»
.
Работа с join
Дан массив .
С помощью метода join
преобразуйте массив в строку «я+учу+javascript+!»
.
Задачи
Преобразуйте первую букву
строки в верхний регистр.
Преобразуйте первую букву каждого слова
строки в верхний регистр.
Преобразуйте строку «var_test_text»
в «varTestText»
.
Скрипт, конечно же, должен работать с любыми аналогичными строками.
Урок №
плейлист на ютубПрактическое применение ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника
мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Тип данных строка (string)
используется для представления текста. Соответственно, значениями типа string является текст. Любой текст в JavaScript является строкой.