Как создать сайт

Работа со строками в JavaScript

Здравствуйте! В этом уроке рассмотрим как в 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() + "<br/>"); //привет джим
document.write(hello1.toUpperCase() + "<br/>"); //ПРИВЕТ ДЖИМ

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

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

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

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

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

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

var hello1 = "   Привет Джим  ";
var beforeLen = hello1.length;
hello1 = hello1.trim();
var afterLen = hello1.length;
document.write("Длина строки до: " + beforeLen +  "<br/>"); //15
document.write("Длина строки после: " + afterLen +  "<br/>"); //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[str1] + "<br/>");

ИТОГИ

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

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

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

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

ЗАДАНИЯ

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

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

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

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

Найти число

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

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

 

Понравилась запись? Подпишитесь на обновления по почте: