Урок 7. Строковые функции в JavaScript
Теория
Методы и функции: length, toUpperCase, toLowerCase, substr, String, substring, slice, indexOf, replace, split, join.
Свойство length
Свойство length позволяет узнать длину строки (количество символов в ней).
Синтаксис: строка.length.
Пример
Пусть в переменной s хранится строка. Найти ее длину:
s='abcdefg';document.write(s.length)
Метод toUpperCase
Метод toUpperCase производит преобразование строки в верхний регистр (из маленьких букв делает большие). При этом возвращается новая строка, а исходная строка не меняется.
Синтаксис: строка.toUpperCase().
Пример
Строка из нижнего регистра преобразуется в верхний:
s='javascript+html';document.write(s.toUpperCase())
Пример
Исходная строка не меняется:
s='JavaScript',b=s.toUpperCase();document.write('Новая строка: '+b+'<p>Исходная строка: '+s)
Метод toLowerCase
Метод toLowerCase производит преобразование строки в нижний регистр (из больших букв делает маленькие). При этом возвращается новая строка, а исходная строка не меняется.
Синтаксис: строка.toLowerCase().
Пример
В строке все большие буквы преобразоваются в маленькие:
s='Язык JAVASCRIPT';document.write(s.toLowerCase())
Пример
Исходная строка не меняется:
s='Язык JAVASCRIPT',b=s.toLowerCase();document.write('Новая строка: '+b+'<p>Исходная строка: '+s)
Метод substr
Метод substr возвращает подстроку из строки (исходная строка при этом не меняется).
1-й параметр задает номер символа, с которого метод начинает отрезать (нумерация с 0), а 2-й параметр - сколько символов отрезать.
1-й параметр может принимать отрицательные значения. В этом случае отсчет символа, с которого начинается обрезание, будет идти с конца строки. Причем последний символ имеет номер "-1", предпоследний - "-2" и так далее.
2-й параметр не является обязательным. Если он не указан, то вырезаны будут все символы до конца строки.
Синтаксис: строка.substr(откуда отрезать,[сколько символов отрезать]).
Пример
Подстрока длиной 3 символа вырежется с 0-й позиции:
s='Мне очень нравится JavaScript';document.write(s.substr(0,3))
Пример
Подстрока вырезается с 4-й позиции и до конца строки (т.к. последний параметр не задан):
s='Мне очень нравится JavaScript';document.write(s.substr(4))
Пример
Подстрока вырезается с 10-го символа с конца и берется 4 символа:
s='Мне очень нравится JavaScript';document.write(s.substr(-10,4))
Пример
Подстрока вырезается с 10-го символа с конца и берется вся оставшаяся строка до конца (т.к. последний параметр не задан):
s='Мне очень нравится JavaScript';document.write(s.substr(-10))
Пример
Возвращается последний символ строки:
s='Мне очень нравится JavaScript';document.write(s.substr(-1))
Функция String
Функция String преобразовывает переданное значение в строку.
Преобразования для примитивов (числа, строки и другие простые типы) происходят самым очевидным образом. Например: true - 'true', 5 - '5'. А объекты чаще всего преобразовываются к '[object Object]', но могут быть исключения.
Синтаксис: String(что нужно преобразовать).
Пример
Преобразовать несколько значений в строку:
//Примитивы:
String(0)//'0'
String(NaN)//'NaN'
String(false)//'false'
String('str')//'str'
String(null)//'null'
String(undefined)//'undefined'
//Объекты:
String({})//'[object Object]'
String([1,2,3])//'1,2,3'
String(new Date())//'Mon Jan 20 2020 10:04:33 GMT+0300'
Пример
Но String используют редко. Чаще пишут так:
''+0//'0'
''+NaN//'NaN'
''+false//'false'
''+{}//'[object Object]'
''+[1,2,3]//'1,2,3'
''+new Date()//'Mon Jan 20 2020 10:04:33 GMT+0300'
Т.е. просто добавляют нужное значение к строке.
Метод substring
Метод substring возвращает подстроку из строки (исходная строка при этом не меняется).
1-й параметр задает номер символа, с которого метод начинает отрезать (учтите, что нумерация с 0), а 2-й параметр - номер символа, на котором следует закончить вырезание (символ с этим номером не включается в вырезанную часть).
2-й параметр не является обязательным, если он не указан, то вырезаны будут все символы до конца строки.
Если 1-й параметр больше 2-го, тогда substringing ведет себя, как будто они поменялись местами. Например, s.substringing(3,0)==s.substringing(0,3).
Если какой-то из параметров больше, чем длина строки, он считается равным длине строки.
Отрицательные значения приравниваются к 0.
Синтаксис: строка.substr(откуда начать отрезать,[докуда отрезать]).
Пример
Вырезаются слова 'Мне очень'. 1-я буква этой подстроки имеет номер 0, а последняя - номер 8. Указываем, что мы будем резать с 0-го символа по 9-й (на 1 больше, чем нам нужно):
s='Мне очень нравится JavaScript';document.write(s.substring(0,9))
Пример
Вырезать слово 'очень':
s='Мне очень нравится JavaScript';document.write(s.substring(4,9))
Пример
Подстрока вырезается с 4-й позиции и до конца строки (т.к. последний параметр не задан):
s='Мне очень нравится JavaScript';document.write(s.substr(4))
Метод slice
Метод slice возвращает возвращает подстроку из строки (исходная строка при этом не меняется).
1-м параметром указывается номер символа строки, с которого начинается вырезание, а 2-м параметром - номер символа, на котором закончится вырезание (при этом символ с этим номером не включится в вырезанную часть).
2-й параметр не является обязательным. Если его не указать, подстрока возьмется с указанного в 1-м параметре символа до конца строки.
2-й параметр также может принимать отрицательные значения. В этом случае отсчет символа, на котором закончится обрезание, начинается с конца строки. Причем последний символ имеет номер "-1", предпоследний - "-2" и так далее.
К примеру, если написать slice(1,-1), то вырезанная часть возьмется с 1-го символа включительно по последний не включая его. Если нужно включить и последний символ, нужно просто не задавать 2-й параметр для slice, вот так: slice(1).
Если 2-й параметр меньше 1-го, возвратится пустая строка.
Синтаксис: строка.slice(откуда отрезать,[докуда отрезать]).
Пример
Вырезаются слова 'Мне очень'. 1-я буква этой подстроки имеет номер 0, а последняя - номер 8. Значит, указываем, что резать с 0-го символа по 9-й (на 1 больше, чем нужно):
s='Мне очень нравится JavaScript';document.write(s.substr(0,9))
Пример
Подстрока вырезается с 4-й позиции и до конца строки (т.к. последний параметр не задан):
s='Мне очень нравится JavaScript';document.write(s.substr(4))
Пример
Из исходной строки извлекаются символы от позиции 0 до позиции -1 не включительно (-1 указывает на последний символ и он не включится в извлеченную часть):
s='12345';document.write(s.slice(0,-1))
Преимущество такого подхода в том, что вырезаться всегда будет часть строки, не включая последний символ, независимо от размера строки.
Метод indexOf
Метод indexOf осуществляет поиск подстроки (указывается 1-м параметром) в строке.
Метод вернет позицию 1-го совпадения, а если оно не найдено, то -1.
2-м параметром (он необязателен) можно передать номер символа, откуда следует начинать поиск.
Метод чувствителен к регистру символов.
Синтаксис: строка.indexOf(что ищем,[откуда начать поиск]).
Пример
В строке 'Я учу учу Javascript' ищется слово 'учу'. Метод вернет 2 (с этой позиции начинается 1-е слово 'учу' в строке):
s='Я учу учу Javascript';document.write(s.indexOf('учу'))
Пример
В строке 'Я учу учу Javascript' также ищется слово 'учу', однако поиск начинается с 5-й позиции (это указано 2-м параметром). Метод вернет 6 (с этой позиции начинается 2-е слово 'учу' в строке):
s='Я учу учу Javascript';document.write(s.indexOf('учу',5))
Пример
Метод вернет -1, т.к. подстроки 'PHP' в строке 'Я учу Javascript' нету:
s='Я учу Javascript';document.write(s.indexOf('PHP',5))
Пример
Метод вернет -1, т.к. он чувствителен к регистру (Javascript не равно JaVaScrIpt):
s='Я учу Javascript';document.write(s.indexOf('JaVaScrIpt'))
Пример
Метод вернет -1, т.к. после выбранной позиции совпадения отсутствуют:
s='Я учу Javascript';document.write(s.indexOf('учу',8))
Метод replace
Метод replace осуществляет поиск и замену частей строки.
1-м параметром принимается подстрока, которую меняем, а 2-м - подстрока, на которую меняем.
Синтаксис: строка_в_которой_заменяем.replace(что меняем,на что меняем).
1-м параметром вместо строки может приниматься регулярное выражение.
Пример
Заменить в строке 'Я учу PHP' слово 'PHP' на слово 'JavaScript':
s='Я учу PHP',b=s.replace('PHP','JavaScript');document.write(b)
Пример
Метод меняет только 1-е совпадение. В следующем примере в строке 'Я учу PHP PHP' заменится только 1-е слово 'PHP':
s='Я учу PHP PHP',b=s.replace('PHP','JavaScript');document.write(b)
Пример
Чтобы функция заменила все совпадения, следует воспользоваться так называемым глобальным поиском:
s='Я учу PHP PHP',b=s.replace(/PHP/g,'JavaScript');document.write(b)
Внимание! Чтобы правильно пользоваться приемом с глобальным поиском, нужно разобраться с регулярными выражениями.
Метод split
Метод split осуществляет разбиение строки в массив по указанному разделителю.
Разделитель указывается 1-м необязательным параметром. Если он не задан, вернется вся строка. Если он задан как пустые кавычки '', то каждый символ строки попадет в отдельный элемент массива.
2-м необязательным параметром можно указать максимальное количество элементов в получившемся массиве.
Синтаксис: строка.split([разделитель],[максимальное количество элементов]).
Пример
Строка разбита по разделителю '-'. В результате получится следующий массив a:
s='Мне-очень-нравится-JavaScript',a=s.split('-');document.write(a)
Пример
Строка также разбита по разделителю '-', однако 2-м параметром указано максимальное количество элементов в получившемся массиве (2 элемента). Поэтому в новый массив запишется только 2 элемента:
s='Мне-очень-нравится-JavaScript',a=s.split('-',2);document.write(a)
Пример
Записать каждый символ строки в отдельный элемент массива:
s='abcde',a=s.split('');document.write(a)
Пример
Записать 1-е 3 символа строки в отдельный элемент массива:
s='abcde',a=s.split('',3);document.write(a)
Пример
С помощью split разбивается строка с числами. Внимание на то, что в результате получится массив строк ['1','2','3','4','5'], а не массив чисел [1,2,3,4,5]:
s='12345',a=s.split('');document.write(a)
Пример
Перевернуть символы строки в обратном порядке. Для этого разбить строку в массив с помощью split по разделителю '' (этот разделитель положит каждый символ строки в отдельный элемент массива), перевернуть этот массив с помощью reverse и затем слить перевернутый массив обратно с помощью join:
s='123456789',a=s.split(''),a=a.reverse(),r=a.join('');document.write(r)
Пример
Упростить решение предыдущей задачи, слить все команды в цепочку:
s='123456789',r=s.split('').reverse().join('');document.write(r)
Пример
Проверь! Не отрабатывает Number(a[i]) в цикле!
Дана строка с цифрами. Найти сумму цифр из этой строки. Для этого разбить строку в массив, а затем перебрать этот массив и найти его сумму. Подвох: split возвращает строки, поэтому при суммировании надо преобразовать эти цифры-строки в настоящие числа с помощью Number:
s='12345',a=s.split(''),b=0;for(i=0;i<=a.length;i++){b+=Number(a[i])}document.write(b)
str='12345';arr=str.split('');sum=0;for(i=0;i<=arr.length;i++){sum+=Number(arr[i]);};document.write(sum)
Результат: 15
Пример
Дано число. Записать каждую цифру этого числа в отдельный элемент массива. Подвох: split применяется только к строкам, а у нас число. Преобразовать вначале число к строке с помощью String, а затем применить split:
n=12345,s=String(n),a=s.split('');document.write(a)
Функция join
Функция join сливает строку в массив с указанным разделителем.
Синтаксис: join(разделитель,строка).
Практика
Примеры решения задач
Задача. Поиск и замена
Дана строка 'aaa@bbb@ccc'. Заменить все @ на ! с помощью глобального поиска и замены.
Решение: в данном случае необходимо воспользоваться методом replace, который выполняет поиск и замену. Но при простом варианте использования этот метод найдет и заменит только 1-е совпадение:
s='aaa@bbb@ccc';document.write(s.replace('@','!'))
Чтобы заменить все совпадения, воспользуемся глобальным поиском с помощью регулярного выражения:
s='aaa@bbb@ccc';document.write(s.replace(/@/g,'!'))
Задача. Методы substr, substring, slice
Дана строка 'aaabbbccc'. Вырезать из нее слово 'bbb' 3-мя разными способами (через substr, substring, slice).
Решение: слово 'bbb' начинается с символа номер 3 (нумерация с 0), а заканчивается символом номер 5 (до символа номер 6):
s='aaabbbccc';
document.write(s.substr(3,3));//substr(откуда отрезать, сколько отрезать)
document.write(s.substring(3,6));//substring(откуда отрезать, докуда отрезать)
document.write(s.slice(3,6))//slice(откуда отрезать, докуда отрезать)
Упрощаем код:
s='aaabbbccc';document.write(s.substr(3,3)+', '+s.substring(3,6)+', '+s.slice(3,6))
Обратите внимание на то, что в методах substring и slice 2-й параметр должен быть на 1 больше того символа, который мы хотим забрать (т.е., если указать число 6, то отрезание произойдет до 5 символа включительно).
Задача. Преобразование формата даты
В переменной d лежит дата в формате '2088-8-18'. Преобразовать эту дату в формат '18.8.2088'.
Решение: с помощью метода split строку '2088-8-18' разбивается в массив по разделителю '-', при этом в 0-м элементе окажется год, в 1-м - месяц, во 2-м - день:
d='2088-8-18';a=d.split('-');document.write(a);//получится массив ['2088','8','18']
Теперь, обращаясь к разным элементам массива по их ключам, сформируем нужную строку:
d='2088-8-18';a=d.split('-');b=a[2]+'/'+a[1]+'/'+a[0];document.write(b)//получится строка '18.8.2088'
Сократим код:
d='2088-8-18',a=d.split('-'),b=a[2]+'.'+a[1]+'.'+a[0];document.write(b)
Задачи для решения
Работа с регистром символов
Для решения задач данного блока понадобится метод toUpperCase, toLowerCase.
Дана строка 'js'. Сделать из нее строку 'JS'.
Дана строка 'JS'. Сделать из нее строку 'js'.
Работа с length, substr, substring, slice, indexOf
Для решения задач данного блока понадобятся методы length, substr, substring, slice, indexOf.
Дана строка 'я учу javascript'. Найти количество символов в этой строке.
Дана строка 'я учу javascript'. Вырезать из нее слово 'учу' и слово 'javascript' 3-мя разными способами (через substr, substring, slice).
Дана строка 'я учу javascript'. Найти позицию подстроки 'учу'.
Дана переменная s, в которой хранится какой-либо текст. Реализовать обрезание длинного текста по следующему принципу: если количество символов этого текста больше заданного в переменной n, то в переменную r запишем 1-е n символов строки s и добавим в конец троеточие '…', в противном случае в переменную r записать содержимое переменной s.
Работа с replace
Для решения задач данного блока понадобится метод replace.
Дана строка 'Я-учу-javascript'. Заменить все дефисы на ! с помощью глобального поиска и замены.
Работа с split
Для решения задач данного блока понадобится метод split.
Дана строка 'я учу javascript'. Записать каждое слово этой строки в отдельный элемент массива.
Дана строка 'я учу javascript'. Записать каждый символ этой строки в отдельный элемент массива.
В переменной d лежит дата в формате '2088-8-18'. Преобразовать эту дату в формат '18/8/2088'.
Работа с join
Для решения задач данного блока понадобится метод join.
Дан массив ['я','учу','javascript']. Преобразовать массив в строку 'я+учу+javascript'.
Задачи
Преобразовать 1-ю букву строки в верхний регистр.
Преобразовать 1-ю букву каждого слова строки в верхний регистр.
Преобразовать строку 'var_test_text' в 'varTestText'. Скрипт должен работать с любыми аналогичными строками.
