Обёртка String

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

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

Кратко

Секция статьи "Кратко"

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

Секция статьи "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

Секция статьи "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

Секция статьи "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

Секция статьи "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.

На практике

Секция статьи "На практике"

Дока Дог

Секция статьи "Дока Дог"

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

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