Как получить четвертый символ в строке str javascript
Перейти к содержимому

Как получить четвертый символ в строке str javascript

  • автор:

Определение и инициализация строк

Чаще всего для создания строк используют кавычки и просто помещают в них нужное значение ( ”Hello, World!” ). Одинарные и двойные кавычки в языке уже давно и работают идентично, а обратные ( Hello, World! ) появились позже и имеют некоторые особенности. Так обратные кавычки могут занимать больше одной строки и в них можно вставлять выражения с помощью конструкции $<> . Кроме разных видов кавычек, в JavaScript также есть экранирующий символ ( \ ). Его использование позволяет вставлять специальные символы, такие как сами кавычки внутри строки ( \” ), перенос на новую строку ( \n ), табуляция ( \t ), сам обратный слэш ( \\ ) и другие внутри строковых значений.

const myString1 = "это строка с 'кавычками' внутри"; //можно просто использовать разные виды кавычек const myString2 = `это строка с переносом`; const myString3 = "и эта\n тоже"; const res = 2 + 2; console.log(`ответ: $`); //ответ: 4

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

const str1 = new String("Hello world"); // [String: 'Hello world'] const str2 = String("Hello world"); // Hello world str1.valueOf(); //Hello world //конечно можно получить и строку из объекта, но придется писать больше кода typeof str1; // "object" typeof str2; // "string"

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

Строки в JavaScript — итерируемый тип данных и итерируются они по символам. Число символов в строке можно узнать вызвав свойство length . У каждого символа есть индекс начиная с 0 у первого символа. Мы можем получить доступ к любому символу обратившись по его индексу. Мы так же можем получить индекс первого или последнего вхождения подстроки с помощью методов indexOf() и lastIndexOf() соответственно. Оба метода принимают саму подстроку и необязательным параметром индекс начала поиска. Если важен не индекс а сам факт наличия подстроки в начала, конце или определенном участке строки, можно воспользоваться методами startsWith() и endsWith() , которые принимают те же параметры и возвращают ответ в виде булева значения.

const myStr = "Hello, World!"; myStr[1]; //e myStr.length; //13 myStr.indexOf("l"); //3 //"l" с индексом 2 не учитывалась потому что посик начат с 3 myStr.startsWith("Hell"); //true myStr.endsWith("?"); //false

Важно помнить, что строки неизменяемый тип данных и мы не можем просто переопределить подстроку по индексу. Вместо этого следует создать новую строку с помощью метода slice() , который принимает индекс начала и необязательным параметром конца “среза” и возвращает подстроку, содержащую все символы исходной строки между указанными индексами. Если индекс конца не указан — “срез” будет сделан до конца исходной строки. Так же можно воспользоваться методом replace() , который, при базовом использовании, принимает искомую подстроку и подстроку, которая ее заменит и возвращает новую строку. Полученные строки, как и любые другие, можно конкатенировать (объединять) в новую строку с помощью оператора сложения “ + ” или метода concat() . Оператор сложения при конкатенации строки с числом преобразует число в строку.

const myStr = "Hello, World!"; const slice = myStr.slice(0, 6); //Hello, const replace = myStr.replace("World", "John"); //Hello, John! const myStr2 = "Number: " + 42; //Number: 42

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

Регулярные выражения

Иногда нам нужно найти в строке не конкретную подстроку, а что-то более абстрактное, например все цифры, даты, слова на определенном языке или подстроки, содержащие определенные символы. В таких случаях на помощь приходят регулярные выражения (Regular Expressions или просто «регэксы») и специальные методы строк для работы с ними. Они позволяют сопоставлять и обрабатывать текст с использованием описанных шаблонов, что делает их очень полезными для поиска, замены и проверки наличия определенных паттернов в строках. Они состоят из символов и метасимволов, которые формируют шаблон. Вот некоторые из таких метасимволов, которые можно использовать в регулярных выражениях:

  • . — любой символ, кроме переноса строки.
  • \d — любая цифра
  • \D — все, кроме цифр
  • \w — любая буква
  • \W — все, кроме букв
  • \s — пробел
  • ^ — начало строки.
  • $ — конец строки.
  • []: один символ из набора символов или диапазона символов. Например [abcd] и [a-d] это один и тот же набор символов.
  • ( ) — группирует часть выражения в область видимости операторов. * *
    • предыдущий символ 0 или более раз. * *
    • предыдущий символ 1 или более раз.

    Регулярные выражения могут быть модифицированы с помощью флагов (модификаторов), которые определяют дополнительные параметры поиска. Вот некоторые распространенные модификаторы:

    • g — поиск по всем совпадениям вместо первого.
    • i — игнорировать регистр символов при поиске.
    • m — ищет совпадения в каждой строке, а не только в начале и конце всей строки.

    Регулярные выражения могут хранится как значение переменной с типом RegExp. Так шаблон для поиска всех строк или подстрок с датой в формате dd.mm.yyyy будет выглядеть как const datePattern=/\d\.\d\.\d/g . Давайте его разберем: сначала идет слэш / как начало выражения, потом \d означает две любые цифры, после них идет символ точки, экранированный обратным слэшем \. , ведь иначе точка будет означать любой символ. Такая конструкция ( \d\. ) повторяется трижды, но в последний раз мы ищем уже 4 цифры номера года. После этого идут закрывающий выражение слэш / и флаг g который указывает на то что выражение ищет все совпадения, а не только первое. JavaScript предоставляет несколько методов для работы с регулярными выражениями:

    • test(): метод строки, который проверяет, соответствует ли строка заданному паттерну регулярного выражения. Он возвращает true, если совпадение найдено, и false в противном случае.
    • exec(): метод регулярного выражения, который выполняет поиск совпадений в строке. Он возвращает массив с информацией о совпадении или null, если совпадение не найдено.
    • match(): метод строки, который выполняет поиск совпадений в строке с использованием заданного паттерна регулярного выражения. Он возвращает массив с информацией о найденных совпадениях или null, если совпадение не найдено.
    • search(): метод строки, который выполняет поиск позиции первого совпадения заданного паттерна регулярного выражения в строке. Он возвращает позицию совпадения или -1, если совпадение не найдено.

    Регулярные выражения так же могут применяться в методах split() и replace() .

    const myStr1 = "Today is 20.08.2023, tomorrow will be 21.08.2023"; const datePattern = /\d\.\d\.\d/g; const dates = myStr1.match(datePattern); //[ '20.08.2023', '21.08.2023' ] const myStr2 = "test@example.com"; const emailPattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]$/; //шаблон проверки на соответствие адресу электронной почты const isEmail = emailPattern.test(myStr2); //true const myStr3 = "Hello, World! My name is John."; const space = /\s/; //этот шаблон можно заменить на строку с пробелом (" "). const arrFromStr = myStr3.split(space); // ["Hello,", "World!", "My", "name", "is", "John."]

    Заключение:

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

    JavaScript: Извлечение символов из строки

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

    const firstName = 'Tirion'; console.log(firstName[0]); // => T 

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

    // Длина строки 6, поэтому последний индекс — это 5 const firstName = 'Tirion'; console.log(firstName[5]); // => n 

    Вопрос на самопроверку. Что выведет этот код?

    const magic = '\nyou'; console.log(magic[1]); // => ? 

    Ответ Данный код выведет символ `y`

    Индексом может быть не только конкретное число, но и значение переменной. Вот пример, который приведёт к тому же результату — выводу на экран символа T, но индекс внутри квадратных скобок записан не числом, а константой:

    const firstName = 'Tirion'; const index = 0; console.log(firstName[index]); // => T 

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

    const firstName = 'Tirion'; console.log(firstName[10]); // => undefined 

    Задание

    Выведите на экран последний символ строки, находящейся в константе name

    Упражнение не проходит проверку — что делать? ��

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

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

    В моей среде код работает, а здесь нет ��

    Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

    Мой код отличается от решения учителя ��

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

    В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

    Прочитал урок — ничего не понятно ��

    Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

    Полезное

    Определения

    • Индекс — позиция символа внутри строки.

    String.prototype.substr()

    Предупреждение: Внимание: так как String.prototype.substr(…) не полностью упразднена (а лишь «удалена из стандартов по вебу»), она считается унаследованной функцией, использование которой лучше избегать там, где это возможно. Она не является частью ядра языка JavaScript и может быть удалена в будущем. Если есть возможность, используйте метод substring() .

    Метод substr() возвращает указанное количество символов из строки, начиная с указанной позиции.

    Интерактивный пример

    Синтаксис

    str.substr(start[, length])

    Параметры

    Позиция, с которой начинать извлекать символы. Если передано отрицательное число, она трактуется как strLength — start , где strLength равна длине строки (например, если параметр start равен -3, то он трактуется как strLength — 3 .)

    Необязательный параметр. Количество извлекаемых символов.

    Возвращаемое значение

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

    Описание

    Параметр start является индексом символа. Индекс первого символа равен 0, а последнего символа — на один меньше длины строки. Метод substr() начинает извлекать символы начиная с позиции start и собирая length символов (если он не достигнет раньше конца строки, в этом случае будет возвращено меньшее количество символов).

    Если параметр start является положительным и он больше, либо равен длине строки, метод substr() вернёт пустую строку.

    Если параметр start является отрицательным, метод substr() использует его как индекс символа, начиная с конца строки. Если параметр start отрицателен и по модулю больше длины строки, метод substr() будет использовать 0 в качестве начального индекса. Обратите внимание: описанная обработка отрицательных значений аргумента start не поддерживается JScript от Microsoft.

    Если параметр length равен нулю или отрицателен, метод substr() вернёт пустую строку. Если параметр length опущен, метод substr() извлечёт все символы до конца строки.

    Примеры

    Использование метода substr()

    var str = "абвгдеёжзи"; console.log("(1, 2): " + str.substr(1, 2)); // '(1, 2): бв' console.log("(-3, 2): " + str.substr(-3, 2)); // '(-3, 2): жз' console.log("(-3): " + str.substr(-3)); // '(-3): жзи' console.log("(1): " + str.substr(1)); // '(1): бвгдеёжзи' console.log("(-20, 2): " + str.substr(-20, 2)); // '(-20, 2): аб' console.log("(20, 2): " + str.substr(20, 2)); // '(20, 2): ' 

    Полифил

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

    // only run when the substr() function is broken if ("ab".substr(-1) != "b")  /** * Get the substring of a string * @param start where to start the substring * @param length how many characters to return * @return */ String.prototype.substr = (function (substr)  return function (start, length)  // call the original method return substr.call( this, // did we get a negative start, calculate how much it is from the beginning of the string // adjust the start parameter for negative value start  0 ? this.length + start : start, length, ); >; >)(String.prototype.substr); > 

    Спецификации

    Specification
    ECMAScript Language Specification
    # sec-string.prototype.substr

    Совместимость с браузерами

    BCD tables only load in the browser

    Смотрите также

    • String.prototype.slice()
    • String.prototype.substring()

    Методы строк в JavaScript: простая шпаргалка с примерами

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

    Любые текстовые данные в JavaScript считаются строками. Это примитивный тип, но язык позволяет работать с ним так, будто он является объектом. В том числе — использовать встроенные в JS методы строк, которые собраны в этой шпаргалке.

    Важно: при использовании методов создаётся новая строка, которая записывается в ту же переменную вместо старой строки.

    Как изменить регистр

    toLowerCase

    Преобразует символы в строке в нижний регистр.

    "Hello Tproger".toLowerCase(); // "hello tproger" 

    toUpperCase

    Преобразует символы в строке в верхний регистр.

    "Hello Tproger".toUpperCase(); // "HELLO TPROGER" 

    Как объединить строки

    concat

    Объединяет две или более строки и возвращает одну строку.

    "Hello".concat(" Tproger"); // "Hello Tproger" "Hello".concat(" T", "p", "r", "o", "g", "e", "r"); // "Hello Tproger" 

    Как разделить строку на подстроки

    split

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

    // Получаем каждый символ "Hello Tproger".split(""); // ["H", "e", "l", "l", "o", " ", "T", "p", "r", "o", "g", "e", "r"] // Получаем каждое слово из строки "Hello Tproger".split(" "); //["Hello", "Tproger"] // Устанавливаем ограничитель "Hello Tproger".split(" ", 1); //["Hello"] 

    Как повторить строку

    repeat

    Принимает в качестве параметра число и повторяет строку указанное количество раз.

    "Tproger ".repeat(3); // "Tproger Tproger Tproger " 

    Как найти подстроку

    charAt

    Возвращает символ по указанному индексу.

    "Hello Tproger".charAt(); // "H" 

    includes

    Проверяет, содержит ли строка указанную подстроку. Возвращает значение true или false. Вторым параметром можно указать позицию в строке, с которой следует начать поиск.

    "Hello Tproger".includes("Tproger"); // true "Hello Tproger".includes("Hello", 1); // false 

    indexOf

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

    "Hello World".indexOf("o"); // 4 "Hello World".indexOf("o", 5); // 7 

    lastIndexOf

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

    "Hello World".lastIndexOf("o"); // 7 "Hello World".lastIndexOf("o", 5); // 4 

    endsWith

    Проверяет, заканчивается ли строка символами, заданными первым параметром. Возвращает true или false. Есть второй необязательный параметр — ограничитель по диапазону поиска. По умолчанию он равен длине строки.

    "Hello Tproger".endsWith("Tproger"); // true "Hello Tproger".endsWith("Tproger", 12); // false 

    startsWith

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

    "Hello Tproger".startsWith("Hello"); // true "Hello Tproger".startsWith("Hello", 1); // false 

    search

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

    "hi, hello, hey".search("hello"); // 4 

    Как извлечь подстроку

    slice

    Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).

    "Методы строк на Tproger".slice(16); // "Tproger" "Методы строк на Tproger".slice(16, 21); // "Tprog" // Отрицательные значения тоже работают "Методы строк на Tproger".slice(-7); // "Tproger" "Методы строк на Tproger".slice(-7, -2); // "Tprog" 

    substring

    Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.

    "Методы строк на Tproger".substring(5, 2); // "тод" 

    substr

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

    "Методы строк на Tproger".substr(7, 5); // "строк" "Методы строк на Tproger".substr(-7, 5); // "Tprog" 

    Как заменить подстроку

    replace

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

    "hi, hello, hi".replace("hi", "hey"); // "hey, hello, hi" "hi, hello, hi".replace(/hi/g, "hey"); // "hey, hello, hey" 

    replaceAll

    Даёт такой же результат, как метод replace() с глобальным флагом g. Заменяет все найденные совпадения другой строкой или переданной функцией.

    "hi, hello, hi".replaceAll("hi", "hey"); // "hey, hello, hey" 

    Как добавить в строку пробелы или другие символы

    padEnd

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

    "Hello Tproger".padEnd(20, "*"); // "Hello Tproger*******" 

    padStart

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

    "Hello Tproger".padStart(20, "*"); // "*******Hello Tproger" 

    Как удалить пробелы в строке

    trim

    Обрезает пробелы с обоих концов строки.

    " Hello Tproger ".trim(); // "Hello Tproger" 

    trimEnd

    Обрезает пробелы в конце строки

    " Hello Tproger ".trimEnd(); // " Hello Tproger" 

    trimStart

    Обрезает пробелы в начале строки

    " Hello Tproger ".trimStart(); // "Hello Tproger " 

    Как работать с Юникодом

    charCodeAt

    Возвращает числовое значение Юникода по указанному индексу. Обратите внимание: у букв в верхнем и нижнем регистрах разные коды.

    "T".charCodeAt() // 84 "t".charCodeAt() // 116 

    fromCharCode

    Преобразует числовые значения Юникода в читаемые символы.

    String.fromCharCode(72, 101, 108, 108, 111); // "Hello" 

    Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.

    '?'.length; // 2, редкий китайский иероглиф 

    Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.

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

    Больше полезных материалов по JS:

    • Шпаргалка по современному JavaScript
    • Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *