/ ↲
    Расширенный поиск

    JavaScript

    Обёртка String

    Обёртка с дополнительными методами для работы со строками

    Время чтения: 7 мин

    1. Кратко
    2. Как пишется
    3. Как понять
      1. Смена регистра
      2. Поиск подстроки
        1. 1️⃣ includes
        2. 2️⃣ startsWith
        3. 3️⃣ endsWith
        4. 4️⃣ indexOf
      3. Получение подстроки
      4. Деление строки на слова
      5. Замена подстроки
      6. Очистка строки
    4. На практике
      1. doka-dog

    Кратко

    String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками:

    • поиска по строке;
    • строковых преобразований;
    • получения отдельных символов.

    Строки автоматически оборачиваются в обёртку String при вызове методов над ними.

    Как пишется

    Обернуть строку в String можно вручную, вызвав конструктор new String():

            
          
          const primitive = 'приветики'const str = new String('приветики')
          const primitive = 'приветики'
const str = new String('приветики')

    В этом случае переменные primitive и str будут разных типов:

            
          
          console.log(typeof primitive)// stringconsole.log(typeof str)// objectconsole.log(str == 'приветики')// true, при приведении к строке значения будут одинаковымиconsole.log(str === 'приветики')// false, потому что разные типы данных
          console.log(typeof primitive)
// string
console.log(typeof str)
// object

console.log(str == 'приветики')
// true, при приведении к строке значения будут одинаковыми
console.log(str === 'приветики')
// false, потому что разные типы данных

    Если вызывать методы String на примитиве, JavaScript автоматически обернёт его в обёртку:

            
          
          const primitive = 'привет!'console.log(primitive.toUpperCase())// ПРИВЕТ!
          const primitive = 'привет!'
console.log(primitive.toUpperCase())
// ПРИВЕТ!

    Как понять

    Обычно в JavaScript работают с примитивным строковым типом. Например, const str = 'my string'.

    Обёртка содержит дополнительные методы для работы со строками. Они не входят в стандарт типа данных «строка» и поэтому выделены в отдельный модуль.

    Обёртка используется автоматически и не требует дополнительной работы от программиста. JavaScript сам оборачивает строку, когда программист вызывает метод, находящийся в обёртке.

    Смена регистра

    Для приведения всех символов строки к нижнему регистру используется метод toLowerCase, а для приведения к верхнему — toUpperCase:

            
          
          const lowercased = 'СОБАКА'.toLowerCase()console.log(lowercased) // собакаconst uppercased = 'котик'.toUpperCase()console.log(uppercased) // КОТИК
          const lowercased = 'СОБАКА'.toLowerCase()
console.log(lowercased) // собака

const uppercased = 'котик'.toUpperCase()
console.log(uppercased) // КОТИК

    Это пригодится для нормализации текста, чтобы сравнивать результаты текстового ввода без учёта регистра:

    Открыть демо в новой вкладке

    Поиск подстроки

    Для поиска одной строки внутри другой существует целый набор методов:

    1️⃣ includes

    includes принимает аргументом строку, которую нужно найти. Возвращает true, если строка нашлась и false — если нет.

            
          
          const phrase = 'мама мыла раму'console.log(phrase.includes('мы'))// trueconsole.log(phrase.includes('тикток'))// false
          const phrase = 'мама мыла раму'

console.log(phrase.includes('мы'))
// true

console.log(phrase.includes('тикток'))
// false

    2️⃣ startsWith

    startsWith принимает аргументом строку, которую нужно найти. Возвращает true, если текущая строка начинается с искомой и false — если нет.

            
          
          const phrase = 'папа мыл ногу'console.log(phrase.startsWith('па'))// trueconsole.log(phrase.startsWith('мыл'))// falseconsole.log(phrase.startsWith('тикток'))// false
          const phrase = 'папа мыл ногу'

console.log(phrase.startsWith('па'))
// true

console.log(phrase.startsWith('мыл'))
// false

console.log(phrase.startsWith('тикток'))
// false

    3️⃣ endsWith

    endsWith принимает аргументом строку, которую нужно найти. Возвращает true, если текущая строка заканчивается искомой и false — если нет.

            
          
          const phrase = 'брат мыл яблоко'console.log(phrase.endsWith('яблоко'))// trueconsole.log(phrase.endsWith('мыл'))// falseconsole.log(phrase.endsWith('тикток'))// false
          const phrase = 'брат мыл яблоко'

console.log(phrase.endsWith('яблоко'))
// true

console.log(phrase.endsWith('мыл'))
// false

console.log(phrase.endsWith('тикток'))
// false

    4️⃣ indexOf

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

            
          
          const phrase = 'сестра мыла посуду'console.log(phrase.indexOf('мыла'))// 7console.log(phrase.indexOf('тикток'))// -1
          const phrase = 'сестра мыла посуду'

console.log(phrase.indexOf('мыла'))
// 7

console.log(phrase.indexOf('тикток'))
// -1

    Если вхождений несколько, будет возвращён индекс первого:

            
          
          const phrase = 'сестра мыла посуду'console.log(phrase.indexOf('с'))// 0
          const phrase = 'сестра мыла посуду'

console.log(phrase.indexOf('с'))
// 0

    Вторым аргументом методу можно передать индекс, с которого начинать поиск:

            
          
          const phrase = 'сестра мыла посуду'console.log(phrase.indexOf('с', 1))// 2
          const phrase = 'сестра мыла посуду'

console.log(phrase.indexOf('с', 1))
// 2

    Метод indexOf ищет вхождение слева направо. Для поиска в обратном порядке существует зеркальный метод lastIndexOf.

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

    Для решения некоторых задач необходимо отдельно обрабатывать часть строки.

    Самый удобный способ получить подстроку — это метод substring. Метод substring копирует указанную часть строки и возвращает копию в качестве результата. Метод принимает один или два аргумента.

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

            
          
          const phrase = 'javascript'const substring = phrase.substring(4, 10)console.log(substring)// scriptconsole.log(phrase.substring(4, 9))// scrip
          const phrase = 'javascript'

const substring = phrase.substring(4, 10)
console.log(substring)
// script

console.log(phrase.substring(4, 9))
// scrip

    Если указан только один аргумент, то результатом будет строка, начинающаяся с указанного индекса и до конца строки:

            
          
          const phrase = 'javascript'console.log(phrase.substring(0, 4))// javaconsole.log(phrase.substring(1))// avascriptconsole.log(phrase.substring(4))// script
          const phrase = 'javascript'
console.log(phrase.substring(0, 4))
// java
console.log(phrase.substring(1))
// avascript
console.log(phrase.substring(4))
// script

    Существуют два похожих метода — substr и slice. substr — устаревший метод, который будет удалён в будущих версиях языка, не пользуйтесь им.

    slice ведёт себя идентично substring, разница проявляется только если вызвать метод, поменяв местами индекс старта и индекс окончания копирования. В этом случае substring поймёт, что копировать, а slice вернёт пустую строку:

            
          
          const phrase = 'javascript'console.log(phrase.substring(10, 4))// scriptconsole.log(phrase.slice(10, 4))// ''
          const phrase = 'javascript'

console.log(phrase.substring(10, 4))
// script
console.log(phrase.slice(10, 4))
// ''

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

            
          
          const text = 'String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками'const spoiler = text.slice(0, 5) + '...' + text.slice(-5)console.log(spoiler)// Strin...оками
          const text = 'String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками'
const spoiler = text.slice(0, 5) + '...' + text.slice(-5)

console.log(spoiler)
// Strin...оками

    Деление строки на слова

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

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

    Например, разбить текст на слова по пробелам:

            
          
          const phrase = 'London is the capital of Great Britain.'const arr = phrase.split(' ')console.log(arr)// [ 'London', 'is', 'the', 'capital', 'of', 'Great', 'Britain.' ]
          const phrase = 'London is the capital of Great Britain.'
const arr = phrase.split(' ')

console.log(arr)
// [ 'London', 'is', 'the', 'capital', 'of', 'Great', 'Britain.' ]

    Если не указать разделитель, то результатом вернётся массив из исходной строки:

            
          
          const phrase = 'London is the capital of Great Britain.'console.log(phrase.split())// [ 'London is the capital of Great Britain.' ]
          const phrase = 'London is the capital of Great Britain.'

console.log(phrase.split())
// [ 'London is the capital of Great Britain.' ]

    В качестве разделителя можно передавать регулярное выражение или спецсимволы:

            
          
          const phrase = 'London is the\ncapital of\nGreat Britain.'console.log(phrase.split('\n'))// [ 'London is the', 'capital of', 'Great Britain.' ]
          const phrase = 'London is the\ncapital of\nGreat Britain.'

console.log(phrase.split('\n'))
// [ 'London is the', 'capital of', 'Great Britain.' ]

    Замена подстроки

    Для замены одной части строки на другой существует метод replace.

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

            
          
          const str = 'Яблоко - вкусный овощ'const correct = str.replace('овощ', 'фрукт')console.log(correct)// Яблоко - вкусный фрукт
          const str = 'Яблоко - вкусный овощ'
const correct = str.replace('овощ', 'фрукт')
console.log(correct)
// Яблоко - вкусный фрукт

    Если строка на замену не найдена, то замены не произойдёт:

            
          
          const str = 'Яблоко - вкусный овощ'const notChanged = str.replace('апельсин', 'банан')console.log(notChanged)// Яблоко - вкусный овощ
          const str = 'Яблоко - вкусный овощ'
const notChanged = str.replace('апельсин', 'банан')

console.log(notChanged)
// Яблоко - вкусный овощ

    Метод replace заменяет подстроку только один раз. Чтобы изменить более одного раза необходимо использовать регулярные выражения, циклы, либо метод replaceAll:

            
          
          const str = 'Какова цена яблока? Какого яблока? Я их не продаю.'const once = str.replace('яблока', 'помидора')console.log(once)// Какова цена помидора? Какого яблока? Я их не продаю.const all = str.replaceAll('яблока', 'помидора')console.log(all)// Какова цена помидора? Какого помидора? Я их не продаю.const correct = str.replace(/яблока/g, 'помидора')console.log(correct)// Какова цена помидора? Какого помидора? Я их не продаю.
          const str = 'Какова цена яблока? Какого яблока? Я их не продаю.'

const once = str.replace('яблока', 'помидора')
console.log(once)
// Какова цена помидора? Какого яблока? Я их не продаю.

const all = str.replaceAll('яблока', 'помидора')
console.log(all)
// Какова цена помидора? Какого помидора? Я их не продаю.

const correct = str.replace(/яблока/g, 'помидора')
console.log(correct)
// Какова цена помидора? Какого помидора? Я их не продаю.

    Очистка строки

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

    Для очистки строк от пробелов и символов окончания строки существует метод trim. Он не принимает аргументов, а возвращает строку без пробелов в начале и конце строки:

            
          
          const email = '    another@test.com   'console.log(email.trim())// 'another@test.com'
          const email = '    another@test.com   '

console.log(email.trim())
// 'another@test.com'

    Если нужно удалять пробелы только в начале или только в конце строки, то есть похожие методы trimStart и trimEnd.

    На практике

    doka-dog

    🛠 При работе с формами и вводом значений следует очищать поля ввода от замыкающих пробелов вызовом метода trim

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