Javascript цикл по символам строки
Строки и объект String
Последнее обновление: 06.04.2018
Для создания строк мы можем как напрямую присваивать переменной строку:
let name = “Tom”;
Для работы со строками предназначен объект String, поэтому также можно использовать конструктор String:
var name = new String(“Tom”);
Но как правило, используется первый более краткий способ. В первом случае JavaScript при необходимости автоматически преобразует переменную примитивного типа в объект String.
Объект String имеет большой набор свойств и методов, с помощью которых мы можем манипулировать строками.
Свойство length указывает на длину строки:
var hello = “привет мир”; console.log(“В строке ‘” + hello + “‘ ” + hello.length + ” символов”);
Метод repeat() позволяет создать строку путем многократного повторения другой строки. Количество повторов передается в качестве аргумента:
let hello = “hello “; console.log(hello.repeat(3)); // hello hello hello
Шаблоны строк
Шаблоны строк позволяют вставлять в строку различные значения. Для этого строки заключаются в косые кавычки:
let name = “Tom”; let hello = `Hello ${name}`; console.log(hello); // Hello Tom let age = 23; let = `${name} is ${age} years old`; console.log(); // Tom is 23 years old
Для вставки значения в строку оно заключается в фигурные скобки, перед которыми ставится знак доллара.
Также вместо скалярных значений могут добавляться свойства сложных объектов или результаты выражений:
let tom ={ name: “Tom”, age: 25 } let = `${tom.name} is ${tom.age} years old`; console.log(); // Tom is 23 years old sum(x, y){ return x + y; } let a = 5, b = 4; let result = `${a} + ${b} = ${sum(a, b)}`; console.log(result); // 5 + 4 = 9
Поиск в строке
Для поиска в строки некоторой подстроки используются методы indexOf() (индекс первого вхождения подстроки) и lastIndexOf() (индекс последнего вхождения подстроки). Эти методы принимают два параметра:
Подстроку, которую надо найти
Необязательный параметр, который указывает, с какого символа следует проводить поиск подстроки в строке
Оба этих метода возвращают индекс символа, с которого в строке начинается подстрока. Если подстрока не найдена, то возвращается число -1.
let hello = “привет мир. пока мир”; let key = “мир”; let firstPos = hello.indexOf(key); let lastPos = hello.lastIndexOf(key); console.log(“Первое вхождение: “, firstPos); // 7 console.log(“Последнее вхождение: “, lastPos); // 17
Еще один метод – includes() возвращает true, если строка содержит определенную подстроку.
let hello = “привет мир. пока мир”; console.log(hello.includes(“мир”)); // true console.log(hello.includes(“миг”)); // false
С помощью второго дополнительного параметра можно определить индекс, с которого будет начинаться поиск подстроки:
let hello = “привет мир. пока мир”; console.log(hello.includes(“мир”, 5)); // true console.log(hello.includes(“привет”, 6)); // false
Выбор подстроки
Для того, чтобы вырезать из строки подстроку, применяются методы substr() и substring().
Метод substring() принимает два параметра:
индекс символа в строке, начиная с которого надо проводить обрезку строки
индекс, до которого надо обрезать строку
let hello = “привет мир. пока мир”; let world = hello.substring(7, 10); // с 7-го по 10-й индекс console.log(world); // мир
Метод substr() также в качестве первого параметра принимает начальный индекс подстроки, а в качестве второго – длину вырезаемой подстроки:
let hello = “привет мир. пока мир”; let bye = hello.substr(12, 4); console.log(bye); // пока
Если второй параметр не указывается, то обрезается вся остальная часть строки:
let hello = “привет мир. пока мир”; let bye = hello.substr(12); console.log(bye); // пока мир
Управление регистром
Для изменения регистра имеются методы toLowerCase() (для перевода в нижний регистр) и toUpperCase() (для перевода в верхний регистр).
let hello = “Привет Том”; console.log(hello.toLowerCase()); // привет том console.log(hello.toUpperCase()); // ПРИВЕТ ТОМ
Получение символа по индексу
Чтобы получить определенный символ в строке по индексу, можно применять методы charAt() и charCodeAt(). Оба этих метода в качестве параметра принимают индекс символа:
let hello = “Привет Том”; console.log(hello.charAt(2)); // и console.log(hello.charCodeAt(2)); // 1080
Но если в качестве результата метод charAt() возвращает сам символ, то метод charCodeAt() возвращает числовой код этого символа.
Удаление пробелов
Для удаления начальных и концевых пробелов в стоке используется метод trim():
let hello = ” Привет Том “; let beforeLength = hello.length; hello = hello.trim(); let afterLength = hello.length; console.log(“Длина строки до: “, beforeLength); // 15 console.log(“Длина строки после: “, afterLength); // 10
Объединение строк
Метод concat() объединяет две строки:
let hello = “Привет “; let world = “мир”; hello = hello.concat(world); console.log(hello); // Привет мир
Замена подстроки
Метод replace() заменяет первое вхождение одной подстроки на другую:
let hello = “Добрый день”; hello = hello.replace(“день”, “вечер”); console.log(hello); // Добрый вечер
Первый параметр метода указывает, какую подстроку надо заменить, а второй параметр – на какую подстроку надо заменить.
Разделение строки
Метод split() разбивает строку на массив подстрок по определенному разделителю. В качестве разделителя используется строка, которая передается в метод:
var message = “Сегодня была прекрасная погода”; var stringArray = message.split(” “); for(var str in stringArray) console.log(stringArray[str]);
Вывод браузера
Сегодня была прекрасная погода
Проверка начала и окончания строки
Метод startsWith() возвращает true, если строка начинается с определенной подстроки. А метод endsWith() возвращает true, если строка оканчивается на определенную подстроку.
let hello = “let me speak from my heart”; console.log(hello.startsWith(“let”)); // true console.log(hello.startsWith(“Let”)); // false console.log(hello.startsWith(“lets”)); // false console.log(hello.endsWith(“heart”)); // true console.log(hello.startsWith(“bart”)); // false
При этом играет роль регистр символов, и из примера выше мы видим, что “let” не эквивалентно “Let”.
Дополнительный второй параметр позволяет указать индекс (для startsWith – индекс с начала, а для endsWith – индекс с конца строки), относительно которого будет производиться сравнение:
let hello = “let me speak from my heart”; console.log(hello.startsWith(“me”, 4)); // true, “me” – 4 индекс с начала строки console.log(hello.startsWith(“my”, hello.length-8)); // true, “my” – 8 индекс с конца
Источник
- Кавычки
- Кодировка символов строки
- Длина строки
- Нумерация и доступ к символам строки
- Строки неизменяемые
- Управляющие последовательности
- Конкатенация
Тип данных строка (string) используется для представления текста. Соответственно, значениями типа string является текст. Любой текст в JavaScript является строкой.
Кавычки
Строки в JavaScript должны быть заключены в кавычки. В JavaScript существует три вида кавычек: двойные (” “), одинарные (‘ ‘) и обратные (` `):
“Строка в двойных кавычках” ‘Строка в одинарных кавычках’ `Строка в обратных кавычках`
Вид кавычек в начале и конце строки должен совпадать.
Строки могут состоять из нуля и более символов:
” // Пустая строка “Строка” // Не пустая строка
Строки с двойными и одинарными кавычками ничем не отличаются между собой по функционалу – они могут содержать лишь текст и управляющие последовательности. А вот строки с обратными кавычками имеют более широкий функционал. Такие строки могут содержать так называемые подстановки, обозначаемые знаком доллара и фигурными скобками ${выражение}. Подстановки могут содержать любые произвольные выражения:
let стр = “Мир!”; let стр2 = `Привет, ${стр}`; // Использование переменной в строке alert(стр2); // Привет, Мир! alert(`2 + 3 = ${2 + 3}.`); // 2 + 3 = 5.
Выражение, расположенное в подстановке (${…}) вычисляется, и его результат становится частью строки.
Строки в обратных кавычках могут занимать более одной строки, сохраняя все пробельные символы:
let числа = `Числа: 1 2`; alert(числа); // Числа: // 1 // 2
Строки с обратными кавычками называются строками-шаблонами или шаблонными литералами.
Строки, заключённые в одни кавычки, могут содержать другие кавычки:
“одинарные ‘кавычки’ и `обратные` внутри двойных” ‘а здесь “так” и `так`!’ `а здесь “так” и ‘так’!`
Для удобства, большие строковые литералы можно разбивать на несколько строк, заканчивая каждую строку, кроме последней, символом :
alert(“это всё одна длинная строка”); // это всё одна длинная строка alert(‘это всё одна длинная строка’); // это всё одна длинная строка alert(`это всё одна длинная строка`); // это всё одна длинная строка
Кодировка символов строки
Вне зависимости от того, какая кодировка установлена для страницы, в JavaScript для строк всегда используется кодировка UTF-16.
В JavaScript строка – это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет символ Unicode. Для представления символов Unicode в JavaScript используется кодировка UTF-16. Символы включают в себя буквы, цифры, знаки пунктуации, специальные символы и пробельные символы.
Длина строки
Длина строки – это количество 16-битных значений (а не самих символов), содержащихся в ней. Длину строки содержит свойство length:
alert(“Привет”.length ); // 6
Символы, кодовые пункты которых не умещаются в 16 бит, обрабатываются в соответствии с правилами кодировки UTF-16 как последовательности из двух 16-битных значений. Это означает, что строка, имеющая длину, равную 2 (два 16-битных значения), на деле может представлять единственный символ:
alert(“a”.length); // 1 alert(“????”.length); // 2
Нумерация и доступ к символам строки
Как уже было сказано, строка представляет собой упорядоченную последовательность 16-битных значений, каждому из которых соответствует определённый символ. Нумерация 16-битных значений в строке начинается с нуля, т. е. первое 16-битное значение находится под индексом 0, второе – под индексом 1 и т. д. Индекс – это порядковый номер.
Получить символ строки (состоящий из одного 16-битного значения) можно с помощью индекса, заключённого в квадратные скобки [индекс]:
let стр = “Привет”; alert(стр[0]); // П alert(стр[3]); // В
Чтобы с помощью индексов обратиться к символу, состоящему из двух 16-битных значений, нужно, используя конкатенацию, написать эти индексы так, чтобы в результате получилась последовательность из двух 16-битных значений:
let стр = “????”; alert(стр[0] + стр[1]); // “????”
Строки неизменяемые
В JavaScript строки неизменяемые. Это значит, что в уже существующей строке нельзя менять никакие символы или добавлять в неё что-то новое.
Так как строки неизменяемые, то методы, используемые для работы со строками, возвращают новые строки, а не изменяют ту строку, относительно которой они были вызваны:
let стр = “Привет!”; alert(стр.toUpperCase()); // “HELLO” – новое возвращаемое методом значение alert(стр); // “hello” – первоначальная строка не изменена
Чтобы изменить строку, можно создать новую строку и записать её в ту же самую переменную вместо старой строки:
let стр = “Строка”; стр = стр.toUpperCase(); alert(стр); // “СТРОКА”
Управляющие последовательности
В строковых литералах можно использовать управляющие последовательности. Управляющая последовательность – это последовательность, состоящая из обычных символов, которая обозначает символ, не представимый внутри строки другими способами. Управляющие последовательности предназначены для форматирования вывода текстового содержимого.
В таблице ниже представлены управляющие последовательности:
| Последовательность | Значение |
|---|---|
| Символ NUL – пустой символ (“u0000”). | |
| t | Горизонтальная табуляция (“u0009”). |
| n | Перевод на новую строку (“u000A”). |
| b | Возврат на одну позицию – то, что происходит при нажатии на клавишу backspace (“u0008”). |
| r | Возврат каретки (“u000D”). |
| f | Перевод страницы – очистка страницы (“u000C”). |
| v | Вертикальная табуляция (“u000B”). |
| “ | Двойная кавычка (“u0022”). |
| ‘ | Одинарная кавычка (“u0027”). |
| \ | Обратный слэш (“u005C”). |
| xNN | Номер символа из набора символов ISO Latin-1, заданный двумя шестнадцатеричными цифрами (N – шестнадцатеричная цифра 0-F). Например, “x41” (это код буквы “A”). |
| uNNNN | Номер символа из набора символов Unicode, заданный четырьмя шестнадцатеричными цифрами (N – шестнадцатеричная цифра 0-F). Например, “u0041” (это код буквы “A”s). |
Управляющие последовательности могут находиться в любом месте строки:
alert(“Греческая буква сигма: u03a3.”); // Греческая буква сигма: Σ. alert(“Многострочнаяnстрока”) // Многострочная // строка alert(“внутри используются “двойные” кавычки”); // внутри используются “двойные” кавычки
Если символ предшествует любому символу, отличному от приведённых в таблице, то он просто игнорируется интерпретатором:
alert(“k”); // “k”
Символы Unicode, указываемые с помощью управляющей последовательности, можно использовать не только внутри строковых литералов, но и в идентификаторах:
let au03a3 = 5; alert(au03a3); // 5
Конкатенация
Конкатенация – это объединение двух или более строк в одну большую. Объединение происходит с помощью оператора + (плюс). При конкатенации каждая последующая строка добавляется в конец предыдущей:
var str1 = “Hello “; var str2 = “World!”; document.write(str1 + str2 + “<br>”); // “Hello World!” document.write(str1 + “World!”);
Попробовать »
Значение любого типа, которое объединяется со строкой, будет неявно (автоматически) преобразовано в строку и далее будет произведена конкатенация.
var str1 = “Hello “; alert(str1 + 1); // “Hello 1” alert(true + str1); // “trueHello” alert(str1 + NaN); // “Hello NaN”
Попробовать »
Источник
- Назад
- Обзор: Первые шаги
- Далее
Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдём дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.
| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание 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. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.
Поиск подстроки внутри строки и её извлечение
- Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода indexOf (), который принимает одну parameter (en-US) – подстроку, которую вы хотите найти. Введите: browserType.indexOf(‘zilla’); Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 (“m” – 0, “o” – 1, “z” – 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
- Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее: browserType.indexOf(‘vanilla’); Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):
if(browserType.indexOf(‘mozilla’) === -1) { // сделать что-то, если ‘mozilla’ // не является частью этой строки } if(browserType.indexOf(‘mozilla’) !== -1) { // сделать что-то, если ‘mozilla’ // является частью этой строки }
- Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать slice () для извлечения. Попробуйте следующее: browserType.slice(0,3); Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр – позиция последнего символа, перед которым нужно отсечь строку. Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её (помним, что счёт идёт с 0, а не с 1). Также можно сказать, что второй параметр равен длине возвращаемой строки.
- Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: browserType.slice(2); Этот код возвращает «zilla» – это потому, что позиция символа 2 – это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.
Примечание: второй параметр 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. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
- Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определённому результату.
Исправление регистра (размера букв в тексте-прим. пер.)
В этом упражнении у нас есть названия городов в Великобритании, но написанных разным регистром. Мы хотим, чтобы вы изменили их так, чтобы они были в нижнем регистре, за исключением первой буквы. Хороший способ сделать это:
- Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните её в новой переменной.
- Возьмите первую букву строки в этой новой переменной и сохраните её в другой переменной.
- Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, изменённой на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
- Измените значение переменной result на равную конечному результату (не input).
Примечание: Подсказка – параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.
Создание новых строк из старых частей
В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трёхбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:
MAN675847583748sjt567654;Manchester Piccadilly
Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:
MAN: Manchester Piccadilly
Мы бы рекомендовали реализовать это следующим образом:
- Извлеките трёхбуквенный код станции и сохраните его в новой переменной.
- Найдите номер символьного номера точки с запятой.
- Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
- Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
- Измените значение переменной result равной конечной строке (не input).
Заключение
Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна – особенно в JavaScript, поскольку веб-сайты – все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдёт вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе – массивы.
- Назад
- Обзор: Первые шаги
- Далее
В этом модуле
Источник