Как перебрать строку js

String.prototype.split()

Метод split() разбивает объект String на массив строк путём разделения строки указанной подстрокой.

Синтаксис

str.split([separator[, limit]])

Параметры

Необязательный параметр. Указывает символы, используемые в качестве разделителя внутри строки. Параметр separator может быть как строкой, так и регулярным выражением. Если параметр опущен, возвращённый массив будет содержать один элемент со всей строкой. Если параметр равен пустой строке, строка str будет преобразована в массив символов.

Необязательный параметр. Целое число, определяющее ограничение на количество найденных подстрок. Метод split() всё равно разделяет строку на каждом сопоставлении с разделителем separator , но обрезает возвращаемый массив так, чтобы он содержал не более limit элементов.

Описание

Метод split() возвращает новый массив.

Если разделитель separator найден, он удаляется из строки, а подстроки возвращаются в массиве. Если разделитель опущен, массив будет содержать только один элемент, состоящий из всей строки. Если разделитель является пустой строкой, строка str будет преобразована в массив символов.

Если разделитель является регулярным выражением, содержащим подгруппы, то каждый раз при сопоставлении с разделителем, результаты (включая те, что не определены) захвата подгруппы будут помещаться внутрь выходного массива. Однако, не все браузеры поддерживают эту возможность.

Примечание: Если строка является пустой строкой, метод split() вернёт массив, состоящий из одной пустой строки, а не пустой массив.

Примеры

Пример: использование метода split()

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

function splitString(stringToSplit, separator)  var arrayOfStrings = stringToSplit.split(separator); console.log('Оригинальная строка: "' + stringToSplit + '"'); console.log('Разделитель: "' + separator + '"'); console.log( "Массив содержит " + arrayOfStrings.length + " элементов: " + arrayOfStrings.join(" / "), ); > // Строчка из «Бури» Шекспира. Перевод Михаила Донского. var tempestString = "И как хорош тот новый мир, где есть такие люди!"; var monthString = "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек"; var space = " "; var comma = ","; splitString(tempestString, space); splitString(tempestString); splitString(monthString, comma); 

Пример сгенерирует следующий вывод:

Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!" Разделитель: " " Массив содержит 10 элементов: И / как / хорош / тот / новый / мир, / где / есть / такие / люди! Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!" Разделитель: "undefined" Массив содержит 1 элементов: И как хорош тот новый мир, где есть такие люди! Оригинальная строка: "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек" Разделитель: "," Массив содержит 12 элементов: Янв / Фев / Мар / Апр / Май / Июн / Июл / Авг / Сен / Окт / Ноя / Дек

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

В следующем примере метод split() ищет 0 или более пробелов, за которыми следует точка с запятой, за которой снова следуют 0 или более пробелов, и, если этот шаблон найден, удаляет пробелы из строки. Переменная nameList является массивом, возвращённым в результате работы метода split() .

var names = "Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд "; console.log(names); var re = /\s*;\s*/; var nameList = names.split(re); console.log(nameList); 

Пример напечатает две строки; на первой строке напечатана оригинальная строчка, а на второй — получившийся массив.

Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд Гарри Трамп,Фред Барни,Хелен Ригби,Билл Абель,Крис Ханд

Пример: возврат ограниченного числа подстрок

В следующем примере метод split() ищет 0 или более пробелов в строке и возвращает первые три найденных подстроки.

var myString = "Привет, мир. Как дела?"; var splits = myString.split(" ", 3); console.log(splits); 

Вывод скрипта будет следующим:

,,мир.,Как 

Пример: захват подгрупп

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

var myString = "Привет 1 мир. Предложение номер 2."; var splits = myString.split(/(\d)/); console.log(splits); 

Вывод скрипта будет следующим:

,1, мир. Предложение номер ,2,. 

Пример: обращение строки при помощи метода split()

var str = "фывапролд"; var strReverse = str.split("").reverse().join(""); // 'длорпавыф' // split() возвращает массив, к которому применяются методы reverse() и join() 

Бонус: используя оператор === (en-US), можно проверить, являлась ли строка палиндромом.

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

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

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

BCD tables only load in the browser

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

• String.prototype.charAt()
• String.prototype.indexOf()
• String.prototype.lastIndexOf()
• Array.prototype.join()

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 20 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Полезные методы для строк

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

Необходимые знания:	Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Задача:	Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов для управления строками.

Строки как объекты

Почти всё в JavaScript является объектами. Когда вы создаёте строку, например:

let string = 'This is my string';

ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу String и просмотрев на ней список свойств и методов!

Только не волнуйтесь! Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.

Введем несколько примеров в консоль разработчика.

Поиск длины строки

Это легко — вы просто используете свойство length . Попробуйте ввести следующие строки:

let browserType = 'mozilla'; browserType.length;

Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.

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

Вы можете вернуть любой символ внутри строки, используя обозначение в квадратных скобках. Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:

browserType[0];

Компьютеры считают от 0, а не 1! Чтобы получить последний символ любой строки, мы могли бы использовать следующую строку, объединив эту технику с свойством length :

browserType[browserType.length-1];

Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна length-1 . Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.

Поиск подстроки внутри строки и её извлечение

1. Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода indexOf () , который принимает одну parameter (en-US) — подстроку, которую вы хотите найти. Введите:

browserType.indexOf('zilla');

browserType.indexOf('vanilla');

Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке. Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):

if(browserType.indexOf('mozilla') === -1) < // сделать что-то, если 'mozilla' // не является частью этой строки >if(browserType.indexOf('mozilla') !== -1) < // сделать что-то, если 'mozilla' // является частью этой строки >

browserType.slice(0,3);

browserType.slice(2);

Примечание: второй параметр slice() не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу slice () , чтобы узнать, что ещё вы можете узнать.

Изменение регистра

Строковые методы toLowerCase () и toUpperCase () преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введённые пользователем данные перед их сохранением в базе данных.

Попробуем ввести следующие строки, чтобы узнать, что происходит:

var radData = 'My NaMe Is MuD'; radData.toLowerCase(); radData.toUpperCase();

Обновление частей строки

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

Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:

browserType.replace('moz','van');

Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: browserType = browserType.replace(‘moz’,’van’);

Активные примеры обучения

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

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

Фильтрация приветственных сообщений

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

1. Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
2. Затем вам нужно будет написать условный тест операнд1 оператор операнд2. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
3. Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определённому результату.

h2>Результатh2> div class="output" style="min-height: 125px;"> ul>ul> div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="playable-code" style="height: 290px; width: 95%"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var greetings = ['С днём рождения!', 'С Рождеством, любовь моя', 'Счастливого Рождества всей твоей семье', 'Ты — та, кто нужен мне на Рождество', 'Поправляйся скорее']; for (var i = 0; i < greetings.length; i++) < var input = greetings[i]; // Ваше решение должно быть в фигурных скобках // ниже: вы должны что-то добавить if (greetings[i]) < var result = input; var listItem = document.createElement('li'); listItem.textContent = result; list.appendChild(listItem); >> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  eval(textarea.value); > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var jsSolution = "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar greetings = ['С днём рождения!',\n 'С Рождеством, любовь моя',\n 'Счастливого Рождества всей твоей семье',\n 'Ты — та, кто нужен мне на Рождество',\n 'Поправляйся скорее'];\n\nfor(var i = 0; i < greetings.length; i++) \n>"; var solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Исправление регистра (размера букв в тексте—прим. пер.)

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

1. Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните её в новой переменной.
2. Возьмите первую букву строки в этой новой переменной и сохраните её в другой переменной.
3. Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, изменённой на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
4. Измените значение переменной result на равную конечному результату (не input ).

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

h2>Результатh2> div class="output" style="min-height: 125px;"> ul>ul> div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="playable-code" style="height: 250px; width: 95%"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var cities = ['лонДон', 'МанЧЕСТёр', 'БиРминГЕМ', 'лиВЕРпуЛЬ']; for(var i = 0; i < cities.length; i++) < var input = cities[i]; // пишите код ниже var result = input; var listItem = document.createElement('li'); listItem.textContent = result; list.appendChild(listItem); >textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  eval(textarea.value); > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var jsSolution = "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar cities = ['лонДон', 'МанЧЕСТёр', 'БиРминГЕМ', 'лиВЕРпуЛЬ'];\n\nfor(var i = 0; i < cities.length; i++) "; var solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Создание новых строк из старых частей

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

MAN675847583748sjt567654;Manchester Piccadilly

Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:

MAN: Manchester Piccadilly

Мы бы рекомендовали реализовать это следующим образом:

1. Извлеките трёхбуквенный код станции и сохраните его в новой переменной.
2. Найдите номер символьного номера точки с запятой.
3. Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
4. Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
5. Измените значение переменной result равной конечной строке (не input ).

h2>Результатh2> div class="output" style="min-height: 125px;"> ul>ul> div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="playable-code" style="height: 285px; width: 95%"> var list = document.querySelector('.output ul'); list.innerHTML = ''; var stations = ['MAN675847583748sjt567654;Manchester Piccadilly', 'GNF576746573fhdg4737dh4;Greenfield', 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', 'SYB4f65hf75f736463;Stalybridge', 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; for (var i = 0; i < stations.length; i++) < var input = stations[i]; // пишите ваш код ниже var result = input; var listItem = document.createElement('li'); listItem.textContent = result; list.appendChild(listItem); >textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  eval(textarea.value); > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var jsSolution = "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar stations = ['MAN675847583748sjt567654;Manchester Piccadilly',\n 'GNF576746573fhdg4737dh4;Greenfield',\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',\n 'SYB4f65hf75f736463;Stalybridge',\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];\n\nfor(var i = 0; i < stations.length; i++) "; var solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Заключение

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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Замена символов в строке при переборе строки

Нужно воспользоваться циклом for, чтобы перебрать все символы исходной строки. Встретив букву «а», заменить ее в результирующей строке на «4», «е» на «3», «i» на «1» и «о» на «0». В остальных случаях добавлять к результату исходный символ. Как это сделать? Задача в детском учебнике по JS, я понимаю как заменить символы без использования цикла, но как менять символы при перебере строки я вообще не понимаю.

Отслеживать
задан 15 ноя 2017 в 16:14
1 1 1 золотой знак 1 1 серебряный знак 1 1 бронзовый знак

обрати внимание на слова: добавлять к результату. У тебя есть пустая строка output . В цикле ты ей просто добавляешь в зависимости от условия нужный символ

15 ноя 2017 в 16:16
Заменить не в строке, а в результате, т.е. добавить другой символ
15 ноя 2017 в 16:17
Полагаю, эта задача хочет увидеть конструкцию switch
15 ноя 2017 в 16:18

в цикле for(var i=0;i

Методы строк в 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 для подготовки джуна к собеседованию по фронтенду