Меню
ГлавнаяAndroid

Javascript получить определенный символ в строке. Основные строковые функции. Основы работы со строками

Строка – это последовательность из одного или нескольких символов, которая может содержать буквы, числа и другие символы. В JavaScript это простейший неизменяемый тип данных.

Строки позволяют отображать текст и работать с ним, а текст – основной способ общения и передачи информации в сети. Потому строки являются одним из главных понятий программирования.

Данный мануал научит вас создавать и просматривать вывод строк, объединять строки и хранить их в переменных. Также вы узнаете о правилах использования кавычек, апострофов и перехода к новой строке в JavaScript.

Создание и просмотр строки

В JavaScript существует три способа создания троки: их можно писать в одинарных кавычках (‘), в двойных («) или в обратных кавычках (`). Хотя иногда в сценариях встречаются строки всех трех типов, в рамках одной строки нужно использовать только один тип кавычек.

Строки в одинарных и двойных кавычках – это, по сути, одно и то же. Не существует никаких соглашений касательно использования того или иного типа кавычек, но обычно в сценариях программы рекомендуется последовательно использовать какой-нибудь один тип.

"This string uses single quotes.";
"This string uses double quotes.";

Третий и новейший способ создания строки называется шаблонным литералом. Шаблонные литералы пишутся в обратных кавычках (также этот символ называется тупым ударением) и работают так же, как обычные строки с несколькими дополнительными функциями, которые мы рассмотрим в этой статье.

`This string uses backticks.`;

Простейший способ просмотреть вывод строки – ввести ее в консоль с помощью console.log().

console.log("This is a string in the console.");
This is a string in the console.

Другим простым способом запросить значение строки является всплывающее окно в браузере, которое можно вызвать с помощью alert():

alert("This is a string in an alert.");

Эта строка откроет в браузере окно уведомления с таким текстом:

This is a string in an alert.

Метод alert() используется реже, поскольку оповещения нужно постоянно закрывать.

Хранение строк в переменных

Переменные в JavaScript – это именованные контейнеры, которые хранят значения с помощью ключевых слов var, const или let. Строки можно присваивать переменным.

const newString = "This is a string assigned to a variable.";

Теперь переменная newString содержит строку, на нее можно сослаться и вывести с помощью консоли.

console.log(newString);
This is a string assigned to a variable.

Присваивая строки переменным, не нужно повторно вводить строку каждый раз, когда ее нужно вывести, что упрощает работу со строками внутри программ.

Конкатенация строк

Конкатенация строк – это процесс объединения двух или нескольких строк в одну новую строку. Конкатенация выполняется с помощью оператора +. Символ + также является оператором сложения в математических операциях.

Для примера попробуйте объединить две короткие строки:

"Sea" + "horse";
Seahorse

Конкатенация объединяет конец одной строки с началом другой строки, не вставляя пробелов. Чтобы между строками был пробел, его нужно добавить в конец первой строки.

"Sea " + "horse";
Sea horse

Конкатенация позволяет объединять строки и переменные со строковыми значениями.



const favePoem = "My favorite poem is " + poem + " by " + author ".";

Новые строки, полученные в результате конкатенации, можно использовать в программе.

Переменные с шаблонными литералами

Одной из особенностей шаблонных литералов является возможность включения в строку выражений и переменных. Вместо конкатенации можно использовать синтаксис $ {} для вставки переменной.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = `My favorite poem is ${poem} by ${author}.`;
My favorite poem is The Wide Ocean by Pablo Neruda.

Это синтаксис позволяет получить тот же результат. Шаблонные литералы упрощают конкатенацию строк.

Строковые литералы и строковые значения

Как вы уже, должно быть, заметили, все строки пишутся в кавычках или обратных кавычках, но при выводе строка кавычек не содержит.

"Beyond the Sea";
Beyond the Sea

Строковый литерал – это строка, как она выглядит в исходном коде, включая кавычки. Строковое значение – это строка, которая появляется в выводе (без кавычек).

В данном примере «Beyond the Sea» – это строковый литерал, а Beyond the Sea – строковое значение.

Обход кавычек и апострофов в строках

В связи с тем, что кавычки используются для обозначения строк, существуют особые правила использования апострофов и кавычек в строках. Например, апостроф в середине строки в одинарных кавычках JavaScript воспримет как закрывающую одинарную кавычку, а остальную часть предполагаемой строки попытается прочитать как код.

Рассмотрим такой пример:

const brokenString = "I"m a broken string";
console.log(brokenString);
unknown: Unexpected token (1:24)

То же самое произойдет, если попробовать использовать двойные кавычки внутри строки, взятой в двойные кавычки. Интерпретатор не заметит разницы.

Чтобы избежать подобных ошибок, можно использовать:

  • Другой синтаксис строк.
  • Escape-символы.
  • Шаблонный литерал.

Альтернативный синтаксис строк

Проще всего обойти эту проблему с помощью синтаксиса, обратного тому, который вы используете в сценарии. Например, строки с апострофами брать в двойные кавычки:

"We"re safely using an apostrophe in double quotes."

Строки с цитатами можно брать в одинарные кавычки:

"Then he said, "Hello, World!"";

Комбинируя одиночные и двойные кавычки, вы можете управлять отображением кавычек и апострофов внутри строк. Однако это повлияет на согласованность синтаксиса в файлах проекта, их будет сложно поддерживать.

Escape-символ \

С помощью обратного слеша JavaScript не будет интерпретировать кавычки как закрывающие.

Комбинация \’ всегда будет восприниматься как апостроф, а \» – как двойные кавычки, без исключений.

Это позволяет использовать апострофы в строках в одинарных кавычках, а цитаты – в строках с двойными кавычками.

"We\"re safely using an apostrophe in single quotes."
"Then he said, \"Hello, World!\"";

Этот метод выглядит немного беспорядочно. Но он необходим, если в одной строке содержатся и апостроф, и двойные кавычки.

Шаблонные литералы

Шаблонные литералы определяются обратными кавычками, поэтому и двойные кавычки, и апострофы можно спокойно использовать без каких-либо дополнительных манипуляций.

`We"re safely using apostrophes and "quotes" in a template literal.`;

Шаблонные литералы не только позволяют избежать ошибок при отображении кавычек и апострофов, но также предоставляют поддержку встроенных выражений и многострочных блоков, о чем речь пойдет в следующем разделе.

Многострочные строки и переход к новой строке

В некоторых ситуациях есть необходимость вставить символ новой строки или разрыв строки. Escape-символы \n or \r помогут вставить новую строку в вывод кода.

const threeLines = "This is a string\nthat spans across\nthree lines.";
This is a string
that spans across
three lines.

Это разобьет вывод на несколько строк. Однако если в коде есть длинные строки, с ними будет сложно работать и читать. Чтобы отобразить одну строку в нескольких строках, используйте оператор конкатенации.

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

Обойти новую строку можно также с помощью escape-символа \.

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

Примечание : Этот метод использовать не рекомендуется, так как это может вызвать проблемы в некоторых браузерах.

Чтобы сделать код удобочитаемым, используйте шаблонные литералы. Это позволяет исключить конкатенацию и escape-символы.

const threeLines = `This is a string
that spans across
three lines.`;
This is a string
that spans across
three lines.

Поскольку разные базы кода могут использовать разные стандарты, важно знать все способы перехода к новой строке и создания многострочных строк.

Заключение

Теперь вы знаете основные принципы работы со строками в JavaScript,умеете создавать строки и шаблонные литералы, выполнять конкатенацию и обход и присваивать строки переменным.

Tags:

Объектно-ориентированные возможности и ассоциативные массивы JavaScript как семантические «каркасы» использования функций и конструкций для обработки строк представляют особенный интерес для программирования процессов обработки информации по её смысловому содержанию. На языке JavaScript функции работы со строками можно комбинировать в собственные смысловые конструкции, упрощая код и формализуя предметную область задачи.

В классическом варианте обработка информации — это, прежде всего, строковые функции. Каждая функция и конструкция языка имеет свои особенности в синтаксисе и семантике JavaScript. Методы работы со строками здесь имеют свой стиль, но в обычном применении это просто синтаксис в пределах простой семантики: поиск, замена, вставка, извлечение, контенкация, смена регистра…

Описание строковых переменных

Для объявления строки используется конструкция var. Можно сразу задать ее значение или формировать его в ходе исполнения алгоритма. Для строки можно использовать одинарные или двойные кавычки. Если в ней должна быть кавычка, её необходимо экранировать символом «».

Строка, обозначенная двойными кавычками, требует экранирования внутренних двойных кавычек. Аналогично та, что обозначена одинарными, критична к наличию внутри одинарных кавычек.

В данном примере в строке «str_dbl» перечислены полезные специальные символы, которые можно использовать в строке. При этом сам символ «» экранирован.

Строка — это всегда массив

Работа JavaScript со строками может выполняться множеством способов. Синтаксис языка предоставляет много вариантов. В первую очередь никогда не следует забывать, что (в контексте сделанных описаний):

  • str_isV => «V»;
  • str_chr => «’»;
  • str_dbl => «a».

То есть символы строки доступны как элементы массива, при этом каждый специальный символ — это один символ. Экранирование — это элемент синтакиса. В реальную строку никакой «экран» не помещается.

Использование функции charAt() дает аналогичный эффект:

  • str_isV.charAt(3) => «V»;
  • str_chr.charAt(1) => «’»;
  • str_dbl.charAt(5) => «a».

Программист может использовать любой вариант.

Основные строковые функции

В JavaScript работа со строками выполнена несколько иначе, чем в других языках. К имени переменной (или непосредственно строки) через точку записывается имя функции. Обычно строчные функции именуют методами в стиле синтаксиса языка, но первое слово привычнее.

Самый важный метод строки (правильнее — свойство) — её длина.

  • var xStr = str_isV.length + ‘/’ + str_chr.length + ‘/’ + str_dbl.length.

Результат: 11/12/175 по строкам приведенного выше описания.

Самая важная строчная пара функций — разделение строки на массив элементов и слияние массива в строку:

  • split(s [, l]);
  • join(s).

В первом случае строка разбивается по символу-разделителю «s» на массив элементов, в котором количество элементов не превышает значения «l». Если количество не задано, то разбивается вся строка.

Во втором случае массив элементов сливается в одну строку через заданный разделитель.

Примечательная особенность данной пары: разбиение можно производить по одному разделителю, а слияние — по другому. В этом контексте в JavaScript работа со строками может быть «выведена за пределы» синтаксиса языка.

Классические строчные функции

Обычные функции обработки строк:

  • поиск;
  • выборка;
  • замена;
  • преобразование.

Представлены методами: indexOf(), lastIndexOf(), substr(), substring(), toLowerCase(), toUpperCase(), concan(), charCodeAt() и другими.

В JavaScript работа со строками представлена большим множеством функций, но они либо дублируют друг друга, либо оставлены для старых алгоритмов и совместимости.

Например, использование метода concat() допустимо, но проще написать:

  • str = str1 + str2 + str3;

Применение функции charAt() тоже имеет смысл, а вот применение charCodeAt() имеет реальное практическое значение. Аналогично, для JavaScript перенос строки имеет особенный смысл: в контексте вывода на экран, например, в сообщении alert() — это «n», в конструкции формирования контента страницы это «
». В первом случае это просто символ, а во втором — строка символов.

Строки и регулярные выражения

В JavaScript работа со строками включает в себя механизм регулярных выражений. Это позволяет выполнять внутри браузера сложные поиски, выборки и преобразования строк без обращения к серверу.

Метод match находит, а replace заменяет найденное совпадение нужным значением. Регулярные выражения реализованы в JavaScript на высоком уровне, по сути своей, являются сложными, а ввиду специфики применения переносят центр тяжести с сервера в браузер клиента.

При применении методов match, search и replace следует не только уделить должное внимание тестированию на всём спектре допустимых значений исходных параметров и искомых строк, но и оценить нагрузку на браузер.

Примеры регулярных выражений

Область применения регулярных выражений для обработки строк обширна, но требует большой аккуратности и внимательности от разработчика. В первую очередь регулярки находят применение при тестировании ввода пользователя в полях форм.

Здесь представлены функции, которые проверяют, ввод содержит целое число (schInt) или число вещественное (schReal). Следующий пример показывает, насколько эффективно обрабатывать строки, проверяя их на наличие только допустимых символов: schText — только текст, schMail — правильный адрес электронной почты.

Очень важно иметь в виду, что в JavaScript символы и строки требуют повышенного внимания к локали, особенно когда нужно работать с кириллицей. Во многих случаях целесообразно указывать реальные коды символов, нежели их значения. Русских букв это касается в первую очередь.

Следует особенно отметить, что далеко не всегда следует выполнять задачу, как она поставлена. В частности, в отношении проверки целых чисел и вещественных: можно обойтись не классическими строчными методами, а обычными конструкциями синтаксиса.

Объектно-ориентированные строки

В JavaScript работа со строками представлена широким ассортиментом функций. Но это не является веским основанием для использования их в первозданном виде. Синтаксис и качество функций безупречны, но это универсальное решение.

Любое применение строчных функций предполагает обработку реального смысла, который определяется данными, областью применения, конкретным назначением алгоритма.

Идеальное решение всегда состоит в том, чтобы интерпретировать данные по их смыслу.

Представляя каждый параметр в виде объекта, можно сформулировать функции для работы с ним. Всегда речь идет об обработке символов: числа или строки — это конкретным образом организованные последовательности символов.

Есть общие алгоритмы, а есть частные. Например, фамилия или номер дома — это строки, но если в первом случае допустимы только русские буквы, то во втором случае допустимы цифры, русские буквы и могут встречаться дефисы или индексы через наклонную черту. Индексы могут быть буквенными или цифровыми. Дом может иметь корпуса.

Все ситуации не всегда можно предусмотреть. Это важный момент в программировании. Редкий алгоритм не требует доработки, а в большинстве случаев приходится систематически корректировать функционал.

Формализация обрабатываемой строчной информации в виде объекта улучшает читабельность кода, позволяет вывести его на уровень смысловой обработки. Это другая степень функциональности и значительно лучшее качество кода при большей надежности разработанного алгоритма.

В этой статье речь пойдет о том, что такое строки в JavaScript и методах работы с ними.

Строки — это просто группы символов, такие как « JavaScript », « Hello world! », « http://www.quirksmode.org » или даже « 14 ». Для программирования на JavaScript Вам необходимо знать, что такое строки и как с ними работать, т. к. использовать их придется очень часто. Многие вещи, такие как URL -страницы, значения CSS -параметров и элементов ввода форм — все является строками.

Сначала постараюсь объяснить работы со строками , затем — разницу между в JavaScript. Даже если у Вас есть опыт программирования на другом языке, внимательно прочтите эту часть. В конце я расскажу о самых важных строк в JavaScript .

Основы работы со строками

Давайте рассмотрим основы работы со строками в JavaScript.

Использование кавычек

Когда Вы объявляете строки в JavaScript или работаете с ними, всегда заключайте их в одинарные или двойные кавычки. Этим Вы объясняете браузеру, что он имеет дело со строкой. Не смешивайте использование кавычек в коде, если Вы начали строку с одинарной кавычки, а закончили двойной, JavaScript не поймет, что Вы имели в виду. Как правило, я использую одинарные кавычки для работы со строками, так как двойные кавычки я решил использовать для HTML , а одинарные — для JavaScript. Конечно, Вы можете делать все по-другому, но я советую вам придумать подобное правило для себя.

Давайте представим две строки, которые мы будем использовать на протяжении всей статьи:

Var a = "Hello world!"; var b = "I am a student.";

Сейчас мы объявили две переменные, « a » и « b », и присвоили им строковые значения. После этого мы можем с ними работать, но сначала решим одну проблему: допустим, я написал:

Var b = "I"m a student.";

Строка содержит в себе лишнюю одинарную кавычку, и JavaScript думает, что строка закончена и выводит сообщение об ошибке, не понимая, что следует дальше. Поэтому Вам нужно экранировать кавычку , сообщая браузеру, что её нужно рассматривать как символ, а не как окончание строки. Это осуществляется с помощью «обратного слеша» перед кавычкой:

Var b = "I\"m a student.";

Заметьте, что Вы можете вставлять в строку двойные кавычки без их экранирования. Так как Вы используете одинарные кавычки, как начало и конец строки,

Var b = "I\"m a "student".";

воспринимается без проблем. Двойные кавычки автоматически рассматриваются, как части строки, а не команды.

Встроенные функции

После определения строк можно начать их использование. Например, Вы можете соединить одну строку с другой , или взять из строки « b » подстроку, состоящую из второго—четвертого символов и вставить их в середину строки « a », или определить какой символ стоит двенадцатым в « a », сколько символов в « b », есть ли в них буква «q» и т. д.

Для этого Вы можете использовать встроенные функции, которые JavaScript предопределяет для каждой строки. Одна из них — «length» — возвращает длину строки. То есть если Вы хотите вычислить длину «Hello world!», напишите:

Var c = "Hello world!".length;

Ранее мы присвоили эту строку переменной « а ». Таким образом, Вы сделали переменную « a » строкой, поэтому к ней тоже применима функция «length», и следующая операция даст такой же результат:

Var c = a.length;

Запомните, что Вы можете использовать «length» для любой строки — это встроенная функция. Вы можете вычислить длину любой строки , например: « location.href » или « document.title » или объявленной Вами.

Ниже я представлю список распространенных встроенных методов и свойств.

Строки и числа

В некоторых языках программирования от Вас требуется указывать, является ли переменная числом или строкой, перед тем, как делать с ней что-либо ещё. JavaScript проще относится к разнице между строками и числами. Фактически Вы даже можете складывать числа со строками:

Var c = a + 12;

В некоторых языках программирования обработка такой строки приведет к ошибке. Всё же « a » — это строка, а «12» — число. Однако JavaScript пытается решить проблему, предполагая, что «12» — тоже строка. Таким образом « с » принимает значение « Hello world!12 ». Значит, если Вы используете «+» со строкой и числом, JavaScript пытается сделать из числа строку. Если же Вы применяете математические операции к строке, JavaScript пробует превратить её в число. При отсутствии возможности перевода строки в число (например, из-за наличия в ней букв), JavaScript возвращает NaN — «Not a Number — не является числом».

Наконец, в JavaScript нет разницы между целыми величинами и числами с плавающей точкой.

Число → строка

Для преобразования числа в строку введите:

Var c = (16 * 24) / 49 + 12; d = c.toString();

После этого Вы можете применять к « d » все строковые методы, а « c » все ещё содержит число.

Строка → число

Если Вы хотите преобразовать строку в число, сначала убедитесь, что она состоит только из символов 0—9 . Для этого я просто умножаю строку на 1 .

Var c = "1234"; d = c * 1;

Так как умножение производится только с числами, JavaScript превращает строку в число, если это возможно. В противном случае, результат — NaN .

Заметим, если написать:

Var c = "1234"; d = c + 0;

Результатом будет « 12340 », потому что JavaScript использует «+» для соединения строк, а не их сложения.

Строковые свойства и методы

Так что же мы можем делать со строками? Объединение — это особый случай, но все остальные команды (методы) могут использоваться с любой строкой с помощью конструкции:

Имя_строки.метод();

Список встроенных методов JavaScript для работы со строками

Конкатенация — объединение строк

Во-первых, Вы можете объединить строки, сложив их вместе, вот так:

Document.write(a + b);

в результате получится: « Hello world!I am a student. ». Но, конечно же, Вы хотите, чтобы между предложениями был пробел. Для этого запишем код следующим образом:

Document.write(a + " " + b);

Так мы соединим три строки: « а », « " " » (один пробел) и « b », в итоге получив: « Hello world! I am a student. »

Вы можете использовать даже числа или вычисления, например:

Document.write (a + 3 * 3 + b);

Сейчас мы соединяем строку « а », затем результат выражения « 3 * 3 », рассматриваемый как строка, и « b », получая: « Hello world!9 I am a student. »

При использовании сложения нужно быть внимательным. Команда

Document.write (a + 3 + 3 + b);

соединяет 4 строки: « а », « 3 », « 3 » и « b », потому что «+» в данном случае означает «соединить строки», а не «сложить» и в результате: « Hello world!33 I am a student. ». Если Вы хотите сложить 3 и 3 перед созданием строки, используйте скобки.

Document.write (a + (3 + 3) + b);

Данное выражение соединяет строку « а », результат выражения « 3 + 3 » и « b », в итоге: « Hello world!6 I am a student. ».

indexOf

Один из самых широко используемых встроенных методов это «indexOf». Каждый символ имеет свой индекс, содержащий номер его позиции в строке. Заметим, что индекс первого символа — 0 , второго — 1 и т. д. Таким образом, индекс символа «w» в сроке « а » — 6 .

Используя «indexOf» мы можем вывести индекс символа. Напишите « .indexOf(" ") » после названия строки и вставьте искомый символ между кавычками. Например:

Var a = "Hello world!"; document.write(a.indexOf("w"));

возвратит 6 . Если символ встречается несколько раз, этот метод возвращает первое вхождение. То есть

Document.write(a.indexOf("o"));

возвратит 4 , потому что это индекс первой «o» в строке.

Вы также можете искать комбинацию символов. (Конечно, это тоже строка, но, чтобы избежать путаницы, я не буду называть её так). «indexOf» возвращает позицию первого символа комбинации. Например:

Document.write(a.indexOf("o w"));

тоже возвратит 4 , потому что это индекс «o».

Более того, возможен поиск символа после определенного индекса. Если Вы введете

Document.write(a.indexOf("o", 5));

то получите индекс первой «o», следующей за символом с индексом 5 (это пробел), то есть результат будет — 7 .

Если символ или комбинация не встречается в строке, «indexOf» возвратит « -1 ». Это, по сути, самое популярное применение «indexOf»: проверка существования определенной комбинации символов. Оно является ядром скрипта, определяющего браузер. Для определения IE Вы берете строку:

Navigator.userAgent;

и проверяете, содержит ли она « MSIE »:

If(navigator.userAgent.indexOf("MSIE") != -1) { //Какие-либо дествия с Internet Explorer }

Если индекс « MSIE » — не « -1 » (если « MSIE » встречается где-либо в строке), то текущий браузер — IE .

lastIndexOf

Также существует метод «lastIndexOf», который возвращает последнее вхождение символа или комбинации. Он действует противоположно «indexOf». Команда

Var b = "I am a student."; document.write(b.lastIndexOf("t"));

возвратит 13 , потому что это индекс последней «t» в строке.

charAt

Метод «charAt» возвращает символ, стоящий на указанной позиции. Например, когда Вы вводите

Var b = "I am a student."; document.write(b.charAt(5));

в результате получается « a », так как это символ на шестой позиции (помните, что индекс первого символа начинается с 0).

length

Метод «length» возвращает длину строки.

Var b = "I am a student."; document.write(b.length);

возвратит «15». Длина строки на 1 больше, чем индекс последнего символа.

split

« split » — это специальный метод, позволяющий разделить строку по определенным символам. Используется, когда результат необходимо заносить в массив, а не в простую переменную. Давайте разделим « b » по пробелам:

Var b = "I am a student." var temp = new Array(); temp = b.split(" ");

Теперь строка разбита на 4 подстроки, которые помещаются в массив « temp ». Сами пробелы исчезли.

Temp = "I"; temp = "am"; temp = "a"; temp = "student";

Метод «substring» используется для выделения части строки. Синтаксис метода: « .substring(первый_индекс, последний_индекс) ». Например:

Var a = "Hello world!"; document.write(a.substring(4, 8));

возвратит « o wo », от первой «o» (индекс 4) до второй (индекс 7). Заметьте, что «r» (индекс 8) не является частью подстроки.

Также можно написать:

Var a = "Hello world!"; document.write(a.substring(4));

Это даст целую подстроку « o world! », начиная от символа с индексом 4 и до конца строки.

substr

Также есть метод «substr», работающий немного по-другому. В качестве второго аргумента он использует не номер индекса, а количество символов. То есть

Document.write(a.substr(4, 8));

возвращает 8 символов, начиная от символа с индексом 4 («o»), то есть в результате получаем: « o world! »

toLowerCase и toUpperCase

Наконец, 2 метода, которые иногда могут Вам пригодиться: «toLowerCase» переводит всю строку в нижний регистр, а «toUpperCase» — в верхний.

Var b = "I am a student."; document.write(b.toUpperCase());

В результате получим « I AM A STUDENT. ».

От автора: приветствую вас, друзья. В нескольких предыдущих статьях мы с вами знакомились с числовыми типом данных в JavaScript и работали с числами. Теперь пришло время работы со строками в JavaScript. Давайте ближе познакомимся со строковым типом данных в JavaScript.

В мы с вами уже вскользь познакомились с типом строка и, по сути, мы лишь узнали, что такое строка и как она записывается. Давайте теперь поближе познакомимся со строками и методы работы с ними.

Как вы помните, любой текст в JavaScript является строкой. Строка обязательно должна быть заключена в кавычки, одинарные или двойные, без разницы:

var hi = "hello", name = "John";

var hi = "hello" ,

name = "John" ;

Сейчас мы записали в переменные всего по одному слову. А что если мы хотим записать большой объем текста? Да без проблем, давайте запишем в переменную какой-нибудь рыбный текст и выведем его в консоль:

var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit. Quos nisi, culpa exercitationem!"; console.log(text);

var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit. Quos nisi, culpa exercitationem!" ;

console . log (text ) ;

Работает. Но если текста много, у нас наверняка будут переносы строк, чтобы начинать новый абзац с новой строки. Давайте попробуем добавить такой перенос строки в наш текст:

Как видим, мой текстовый редактор уже подсветил красным цветом возможную проблему. Давайте посмотрим, как на перевод строки в такой интерпретации среагирует браузер:

Синтаксическая ошибка, как и следовало ожидать. Как же быть? Записать в переменную многострочный текст можно несколькими способами. Об одном из них вы даже уже могли догадаться, речь идет о конкатенации строк:

Как видим, редактор уже нормально реагирует на такой вариант записи строки в переменную. Другой вариант — использование обратного слеша (\), который в JavaScript и во многих других языках программирования является экранирующим символом, позволяющим безбоязненно работать со спецсимволами. Что такое спецсимволы мы узнаем далее. Итак, попробуем экранировать невидимый символ перевода строки:

Экранирование также решило нашу проблему. Однако, если мы заглянем в консоль, то и конкатенация строк, и экранирования перевода строки, решив проблему записи в программу, не решило проблему с выводом многострочной строки на экран. Вместо многострочной строки мы увидим в консоли текст в одну строку. Как быть?

И здесь нам поможет специальный символ новой строки — \n. Добавив этот спецсимвол в строку в нужном месте, мы скажем интерпретатору, что в этом месте необходимо завершить текущую строку и сделать переход на новую строку.

var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\ \nQuos nisi, culpa exercitationem!"; console.log(text);

var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\

\nQuos nisi, culpa exercitationem!" ;

console . log (text ) ;

Собственно, если вас не смущает запись текста в коде в одну строку, то мы можем сделать и так:

var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\nQuos nisi, culpa exercitationem!"; console.log(text);

var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\nQuos nisi, culpa exercitationem!" ;

console . log (text ) ;

Результат на экране от этого не изменится, мы увидим многострочный текст в консоли браузера:

Экранирующий символ обратный слеш в коде нам действительно не очень нужен в данной ситуации. А нужен он на самом деле, как и отмечалось выше, для экранирования спецсимволов. Например, внутри строки, которую мы заключили в одинарные кавычки, встречается апостроф, т.е. одинарная кавычка:

var text = "Lorem ipsum d"olor sit amet";

Здравствуйте! В этом уроке рассмотрим как в JavaScript можно создать строку и функции для работы со строками. В принципе в JavaScript любая текстовая переменная является строкой, поскольку JavaScript является не строго типизированным языком программирования (о типах данных читайте ). И также для работы со строками используется класс String:

Var name1 = "Tommy";

Так и использовать конструктор String:

Var name1 = new String("Tommy");

В основном используется 1-ый способ наверное потому что он более краток.

Класс для работы со строками String имеет в своем арсенале довольно большой набор свойств и функций, с помощью которых вы можете совершать различные манипуляции со строками.

Длина строки

Свойство length позволяет задавать а длину строки. Данное свойство возвращает число:

Var hello1 = "привет мир"; document.write("В строке "" + hello + "" " + hello1.length + " символов");

Поиск в строке

Для того чтобы найти в строке некоторую подстроку применяются функции indexOf() (возвращает индекс первого вхождения подстроки) и lastIndexOf() (возвращает индекс последнего вхождения подстроки). Эти функции принимают два аргумента:

  • Подстроку, которую собственно и надо найти
  • Необязательный аргумент, который показывает, с какого символа надо проводить поиск подстроки в строке

Обе эти функции возвращают число, которое является индексом символа, с которого в строке начинается подстрока. В случае если подстрока не найдена, то вернется число -1. Поэтому данные функции используются в логических операторах , потому что как правило надо просто проверить содержит строка подстроку или нет, то в этом случае результат работы этих функций сравнивается с -1.

Var str1 = "Привет Вася!"; var podstr = "Петя"; if(str.indexOf(podstr) == -1){ document.write("Подстрока не найдена."); } else { document.write("Подстрока найдена."); }

В примере будет выведено сообщение «Подстрока не найдена», поскольку строка «Петя» не содержится в строке «Привет Вася!».

Выбор подстроки

Для вырезания из строки подстроки, используются такие функции как substr() и substring().

Функция substring() принимает 2 аргумента:

  • стартовая позиция символа в строке, начиная с которого будет произведена обрезка строки
  • конечная позиция до которой надо обрезать строку
var hello1 = "привет мир. До свидания мир"; var world1 = hello1.substring(7, 10); //с 7-го по 10-й индекс document.write(world1); //мир

Функция substr() также в качестве 1-го параметра принимает стартовый индекс подстроки, а вот в качестве 2-го — длину подстроки:

Var hello1 = "привет мир. До свидания мир"; var bye1 = hello1.substr(12, 2); document.write(bye1);//До

Да и если 2-ой параметр не указывать, то строка будет обрезана до конца:

Var hello1 = "привет мир. До свидания мир"; var bye1 = hello1.substr(12); document.write(bye1); //пока мир

Управление регистром букв

Для изменения регистра букв, то есть чтобы сделать все буквы маленькими или большими используются функции toLowerCase() (для перевода символов в нижний регистр, то есть все буквы будут маленькими) и toUpperCase() (для перевода символов в верхний регистр, то есть все буквы будут большими).

Var hello1 = "Привет Джим"; document.write(hello1.toLowerCase() + "
"); //привет джим document.write(hello1.toUpperCase() + "
"); //ПРИВЕТ ДЖИМ

Получение символа по его индексу

Для того чтобы найти определенный символ в строке по его индексу, применяются функции charAt() и charCodeAt(). Обе эти функции в качестве аргумента принимают индекс символа:

Var hello1 = "Привет Джим"; document.write(hello1.charAt(3) + "
"); //в document.write(hello1.charCodeAt(3) + "
"); //1080

Но вот только если в качестве результата своей работы функция charAt() вернет сам символ, то функция charCodeAt() вернет числовой Юникод код этого символа.

Удаление пробелов

Для удаления пробелов в стоке используется функция trim():

Var hello1 = " Привет Джим "; var beforeLen = hello1.length; hello1 = hello1.trim(); var afterLen = hello1.length; document.write("Длина строки до: " + beforeLen + "
"); //15 document.write("Длина строки после: " + afterLen + "
"); //10

Объединение строк

Функция concat() позволяет объединить 2 строки:

Var hello1 = "Привет "; var world1 = "Вася"; hello1 = hello1.concat(world1); document.write(hello); //Привет Вася

Замена подстроки

Функция replace() позволяет заменить одну подстроку на другую:

Var hello1 = "Добрый день"; hello1 = hello1.replace("день", "вечер"); document.write(hello1); //Добрый вечер

Первый аргумент функции указывает, какую именно подстроку надо заменить, а 2-ой аргумент — на какую собственно подстроку надо заменить.

Разделение строки на массив

Функция split() позволяет разделить строку на массив подстрок, используя определенный разделитель. В качестве оного можно использовать строку, которую передавать в метод:

Var mes = "Сегодня была прекрасная погода"; var stringArr = mes.split(" "); for(var str1 in stringArr) document.write(stringArr + "
");

ИТОГИ

Строки можно создать просто с помощью обычной переменной достаточно в нее поместить текст или с помощью класса String.

Для того чтобы узнать длину строки используется свойство length.

Строки сравниваются побуквенно. Поэтому если в строке есть число, то такие числа могут быть сравнены некорректно, для этого строку нужно преобразовать его к типу number (про класс Number читайте ) .

Также при сравнении строк следует учитывать регистр букв. Большая буква меньше маленькой, а буква ё вне алфавита вообще.

ЗАДАНИЯ

Замена регистра последней буквы в строке

Напишите функцию lastLetterStr(str), которая будет заменять регистр последней буквы, делая ее большой.

Проверка на спам

Напишите функцию provSpam(str), которая будет проверять строку на наличие подстрок: «spam», «sex», «xxx». И возвращать true, если есть данные подстроки и false в противном случае.

Найти число

Напишите функцию extrNum(str), которая из строки получает число, если строка содержит число и возвращать должна функция число. Например есть строка «120грн» нужно вернуть из строки 120.

И на закрепление смотрите видео по работе со строками в JavaScript.