Строка — JavaScript — Дока
Кратко
Секция статьи «Кратко»Любые текстовые данные в JavaScript — это строки (англ. string). Строки представляют собой последовательность символов. Созданная строка является иммутабельной (immutable) и не может быть изменена.
Как пишется
Секция статьи «Как пишется»Есть несколько способов создать строку:
- одинарными кавычками
'; - двойными кавычками
"; - шаблонной строкой через обратный апостроф
`.
Записи одинарными и двойными кавычками идентичны:
const double = "Окна были распахнуты настежь, и булыжник мостовой просыхал после дождя."const single = 'Солнце высушивало мокрые лица домов напротив моего окна'
const double = "Окна были распахнуты настежь, и булыжник мостовой просыхал после дождя."
const single = 'Солнце высушивало мокрые лица домов напротив моего окна'
Можно создать пустую строку или строку из пробелов:
const empty = ''const spaces = ' '
const empty = ''
const spaces = ' '
Если в записи одинарными кавычками нужно поставить апостроф, то символ экранируют обратным слэшем \.
Так мы даём JavaScript понять, что это просто символ, а не закрывающая кавычка:
const who = 'I\'m a good person.'
const who = 'I\'m a good person.'
Шаблонные строки позволяют подставлять в строку значения переменных. Между обратными апострофами пишется текст, а в местах, где нужно вставить значение из переменной используется синтаксис ${имя:
const product = 'Штаны'const qty = 1console.log(`Набор программиста: ${product}, ${qty}шт.`)// Набор программиста: Штаны, 1шт.
const product = 'Штаны'
const qty = 1
console.log(`Набор программиста: ${product}, ${qty}шт.`)
// Набор программиста: Штаны, 1шт.
Детальное описание работы с шаблонными строками, читайте в статье «Шаблонные строки».
Как понять
Секция статьи «Как понять»Строка сложно устроена внутри, несмотря на то, что это примитив. Визуально текст представляет собой последовательность символов, но как компьютер хранит эти символы?
Символ, который видно на экране хранится в компьютере как одно или несколько чисел, каждое такое число называют юнитом.
Компьютер хранит таблицу в которой числу соответствует символ. Такие таблицы называют кодировкой.
В JavaScript используется кодировка UTF-16, самая распространённая в мире. Таблица этой кодировки настолько большая, что покрывает не только все современные алфавиты и иероглифические системы записи, но и шумерскую клинопись, и древнеегипетские иероглифы. Эмодзи тоже содержатся в этой таблице, поэтому нам не нужно ничего устанавливать на компьютер чтобы видеть их 🙌
Отдельный символ строки можно получить по порядковому номеру символа в строке, он начинается с 0:
const greeting = 'Привет!'console.log(greeting[0])// Пconsole.log(greeting[3])// в
const greeting = 'Привет!'
console.log(greeting[0])
// П
console.log(greeting[3])
// в
Операции со строками
Секция статьи «Операции со строками»Для строк определена операция сложения, её также называют конкатенацией строк. При сложении двух строк получается новая строка, склеенная из исходных:
const desire = 'Я хочу'const food = 'пельменей'const bad = desire + foodconsole.log(bad)// Я хочупельменейconst good = desire + ' ' + foodconsole.log(good)// Я хочу пельменей
const desire = 'Я хочу' const food = 'пельменей' const bad = desire + food console.log(bad) // Я хочупельменей const good = desire + ' ' + food console.log(good) // Я хочу пельменей
log(bad)// Я хочупельменейconst good = desire + ' ' + foodconsole.log(good)// Я хочу пельменей
Строки можно сравнивать между собой, для сравнения используется лексикографический порядок. Это означает, что первые символы алфавита считаются меньше последних.
Алгоритм посимвольно сравнивает строки до первого несовпадения, либо пока не закончится одна из строк. Например, для произвольных строк s1 и s2:
- Сравниваются символы
s1и[ 0 ] s2. Если символы разные, то большей будет та строка, символ которой больше. Сравнение завершено.[ 0 ] - Если первые символы совпали, аналогично проверяем вторые символы. Продолжаем, пока не найдём несовпадение или не закончится одна из строк.
- Если строки закончились одновременно, то они равны. Если закончилась одна из строк, то большей строкой считается строка с большим количеством символов.
console.log('А' > 'Я')// falseconsole.log('Кот' > 'Код')// trueconsole.log('Код' > 'Кодер')// falseconsole.log('Код' === 'Код')// true
console.log('А' > 'Я')
// false
console.log('Кот' > 'Код')
// true
console.log('Код' > 'Кодер')
// false
console.log('Код' === 'Код')
// true
Сравнение учитывает регистр букв, если необходимо регистронезависимое сравнение, то обе строки приводятся к верхнему или нижнему регистру с помощью методов to или to:
const capitalized = 'Арбуз'const lowercased = 'арбуз'console.log(capitalized === lowercased)// falseconsole.log(capitalized.toLowerCase() === lowercased.toLowerCase())// true
const capitalized = 'Арбуз'
const lowercased = 'арбуз'
console. log(capitalized === lowercased)
// false
console.log(capitalized.toLowerCase() === lowercased.toLowerCase())
// true
log(capitalized === lowercased)
// false
console.log(capitalized.toLowerCase() === lowercased.toLowerCase())
// true
Специальные символы
Секция статьи «Специальные символы»Когда компьютеры только появились, главным способом взаимодействия с компьютером был текст. Неформатированный текст сложно воспринимать, поэтому появились специальные символы, которые обозначали различные операции, которые нужно сделать с текстом при выводе на экран.
На сегодняшний день актуальными остаются два таких символа:
\n— начало новой строки;\t— табуляция, аналогично нажатию кнопки Tab.
Если эти символы есть в строке, то при печати на экран будет выполнено указанной действие:
const phrase = 'Мы —\n\tЭдисоны\n\t\tневиданных взлётов,\n\t\t\tэнергий\n\t\t\t\tи светов.'console.log(phrase)// Мы —// Эдисоны// невиданных взлётов,// энергий// и светов.
const phrase = 'Мы —\n\tЭдисоны\n\t\tневиданных взлётов,\n\t\t\tэнергий\n\t\t\t\tи светов. '
console.log(phrase)
// Мы —
// Эдисоны
// невиданных взлётов,
// энергий
// и светов.
'
console.log(phrase)
// Мы —
// Эдисоны
// невиданных взлётов,
// энергий
// и светов.
Длина строки
Секция статьи «Длина строки»Часто используемая операция над строкой — получение её длины:
const str = 'Строка текста неизвестной длины'console.log(str.length)// 31
const str = 'Строка текста неизвестной длины'
console.log(str.length)
// 31
Эта операция может вернуть неверное количество символов в строке в тех случаях, когда используются эмодзи. Такой пример рассмотрен в статье о свойстве length строки.
Дополнительные методы
Секция статьи «Дополнительные методы»Сам по себе примитивный тип «строка» не имеет методов. Когда происходит вызов метода, оно автоматически оборачивается в специальную обёртку, которая и содержит методы:
const lowercased = 'арбуз'console.log(lowercased.toUpperCase())// АРБУЗ
const lowercased = 'арбуз'
console. log(lowercased.toUpperCase())
// АРБУЗ
log(lowercased.toUpperCase())
// АРБУЗ
Методы обёртки часто используются, они подробно описаны в отдельной статье.
3.2.3. Работа со строками . JavaScript. Подробное руководство, 6-е издание
Одной из встроенных возможностей JavaScript является способность конкатенировать строки. Если оператор + применяется к числам, они складываются, а если к строкам — они объединяются, при этом вторая строка добавляется в конец первой. Например:
msg = «Hello, » + «world»; // Получается строка «Hello, world»
greeting = «Добро пожаловать на мою домашнюю страницу,» + » » + name;
Для определения длины строки — количества содержащихся в ней 16-битных значений — используется свойство строки length. Например, длину строки s можно получить следующим образом:
s.length
Кроме того, в дополнение к свойству
var s = «hello, world» // Начнем с того же текста.
s.charAt(0) // => «h»: первый символ.
s.charAt(s.length-1) // => «d»: последний символ.
s.substring(1,4) // => «ell»: 2-й, 3-й и 4-й символы.
s.slice(1,4) // => «ell»: то же самое
s.slice(-3) // => «rld»: последние 3 символа
s.indexOf(«l») // => 2: позиция первого символа l.
s.lastlndexOf(‘l’) // => 10: позиция последнего символа l.
s.indexOf(«l», 3) // => 3: позиция первого символа ”1″, следующего
// за 3 символом в строке
s.split(«,») // => [«hello», «world»] разбивает на подстроки
s.
replace(«h», «H») // => «Hello, world»: замещает все вхождения подстроки
s.toUpperCase() // => «HELLO, WORLD»
Не забывайте, что строки в JavaScript являются неизменяемыми. Такие методы, как герlасе() и toUpperCase() возвращают новые строки: они не изменяют строку, относительно которой были вызваны.
В стандарте ECMAScript 5 строки могут интерпретироваться как массивы, доступные только для чтения, и вместо использования метода charAt() к отдельным символам (16-битным значениям) строки можно обращаться с помощью индексов в квадратных скобках:
s = «hello, world»;
s[0] // => «h»
s[s.length-1] // => «d»
Веб-броузеры, основанные на движке Mozilla, такие как Firefox, уже давно предоставляют такую возможность.
Большинство современных броузеров (заметным исключением из которых является IE) последовали за Mozilla еще до того, как эта особенность была утверждена в стандарте ECMAScript 5.
Ссылка на строку JavaScript
❮ Предыдущая Далее ❯
Строки JavaScript
Строка JavaScript хранит ряд символов, таких как «John Doe».
Строка может быть любым текстом в двойных или одинарных кавычках:
let carName1 = «Volvo XC60»;
пусть carName2 = ‘Вольво ХС60’;
Попробуйте сами »
Строковые индексы отсчитываются от нуля:
Первый символ находится в позиции 0, второй в 1 и так далее.
Учебное пособие по строкам см. в нашем Учебном руководстве по строкам JavaScript.
Свойства и методы строки
Обычно строки, такие как «John Doe», не могут иметь методов или свойств.
потому что они не объекты.
Но в JavaScript методы и свойства также доступны для строки, потому что JavaScript обрабатывает строки как объекты при выполнении методов и свойств.
Строковые методы JavaScript
| Имя | Описание |
|---|---|
| символ() | Возвращает символ по указанному индексу (позиции) |
| charCodeAt() | Возвращает Unicode символа по указанному индексу |
| конкат() | Возвращает две или более соединенных строк |
| конструктор | Возвращает функцию конструктора строки |
| заканчивается с() | Возвращает, если строка заканчивается указанным значением |
| изCharCode() | Возвращает значения Unicode в виде символов |
| включает() | Возвращает, если строка содержит указанное значение |
| indexOf() | Возвращает индекс (позицию) первого вхождения значения в строку |
| lastIndexOf() | Возвращает индекс (позицию) последнего вхождения значения в строку |
| длина | Возвращает длину строки |
| localeCompare() | Сравнивает две строки в текущей локали |
| совпадение() | Ищет в строке значение или регулярное выражение и возвращает совпадения |
| прототип | Позволяет добавлять свойства и методы к объекту |
| повтор() | Возвращает новую строку с количеством копий строки |
| заменить() | Ищет в строке значение или регулярное выражение и возвращает строку, в которой значения заменены |
| поиск() | Ищет в строке значение или регулярное выражение и возвращает индекс (позицию) совпадения |
| срез() | Извлекает часть строки и возвращает новую строку |
| разделить() | Разбивает строку на массив подстрок |
| начинается с() | Проверяет, начинается ли строка с указанных символов |
| подстрока() | Извлекает ряд символов из строки из начального индекса (позиции) |
| подстрока() | Извлекает символы из строки между двумя указанными индексами (позициями) |
| toLocaleLowerCase() | Возвращает строку, преобразованную в строчные буквы с использованием языкового стандарта хоста 9. 0042 |
| toLocaleUpperCase() | Возвращает строку, преобразованную в прописные буквы с использованием языкового стандарта хоста. |
| toLowerCase() | Возвращает строку, преобразованную в строчные буквы |
| toString() | Возвращает строку или строковый объект в виде строки |
| toUpperCase() | Возвращает строку, преобразованную в буквы верхнего регистра |
| отделка() | Возвращает строку с удаленными пробелами |
| триммингенд() | Возвращает строку с удаленными пробелами с конца |
| триммингстарт() | Возвращает строку с удаленными пробелами с начала |
| значениеOf() | Возвращает примитивное значение строки или строкового объекта |
Примечание
Все строковые методы возвращают новое значение.
Они не изменяют исходную переменную.
Методы оболочки HTML String
Методы оболочки HTML возвращают строку, заключенную в тег HTML.
Это нестандартные методы, и они могут работать не так, как ожидалось.
| Метод | Описание |
|---|---|
| якорь() | Отображает строку как якорь |
| большой() | Отображает строку крупным шрифтом |
| мерцание() | Отображает мигающую строку |
| полужирный() | Отображает строку жирным шрифтом |
| фиксированный() | Отображает строку, используя шрифт с фиксированным шагом |
| цвет шрифта() | Отображает строку с использованием указанного цвета |
| размер шрифта() | Отображает строку указанного размера |
| курсив() | Выводит строку курсивом |
| ссылка() | Отображает строку как гиперссылку |
| маленький() | Отображает строку с использованием мелкого шрифта |
| удар() | Отображает строку с зачеркиванием |
| суб() | Отображает строку как текст нижнего индекса |
| поддержка() | Отображает строку в виде надстрочного текста |
❮ Предыдущий Следующая ❯
Строковые функции в JavaScript | Учебники по веб-разработке #50
Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке #1
Учебник по HTML: установка VS Code и Live Server | Учебники по веб-разработке #2
Учебник по HTML: базовая структура веб-сайта | Учебники по веб-разработке #3
Учебник по HTML: заголовок, сценарий, ссылка и метатеги | Учебники по веб-разработке #4
Учебник по HTML: заголовки и абзацы | Учебники по веб-разработке #5
Учебник по HTML: теги Img и Anchor | Учебники по веб-разработке #6
Учебник по HTML: списки и таблицы | Учебники по веб-разработке #7
Учебник по HTML: формы и теги ввода | Учебники по веб-разработке #8
Учебник по HTML: встроенные и блочные элементы | Учебники по веб-разработке #9
Учебник по HTML: Идентификаторы и классы в HTML | Учебники по веб-разработке #10
Учебник по HTML: Объекты HTML | Учебники по веб-разработке #11
Учебник по HTML: семантические теги в HTML| Учебные пособия по веб-разработке #12
Учебное пособие по CSS: Введение в CSS | Учебники по веб-разработке #13
Учебник по CSS: Встроенный, внутренний и внешний CSS | Учебники по веб-разработке #14
Учебник по CSS: Селекторы в CSS | Учебные пособия по веб-разработке #15
Учебное пособие по CSS: Использование инструментов разработчика Chrome | Учебные пособия по веб-разработке #16
Учебное пособие по CSS: Шрифты в CSS | Учебники по веб-разработке #17
Учебник по CSS: Цвета в CSS | Учебники по веб-разработке #18
Учебник по CSS: границы и фон | Учебные пособия по веб-разработке #19
Учебное пособие по CSS: Блочная модель CSS, поля и отступы | Учебные пособия по веб-разработке #20
Учебное пособие по CSS: Float & Clear объяснил | Учебники по веб-разработке #21
Учебник по CSS: Стилизация ссылок и кнопок | Учебники по веб-разработке #22
Учебник по CSS: Создание меню навигации | Учебники по веб-разработке #23
Учебное пособие по CSS: Свойство отображения CSS | Учебники по веб-разработке #24
Учебник по CSS: абсолютное, относительное, фиксированное и липкое положение в CSS | Учебники по веб-разработке #25
Проект 1: Создание веб-сайта тренажерного зала с использованием HTML5 и CSS3 | Учебники по веб-разработке #26
Учебник по CSS: Объяснение видимости и z-index | Учебные пособия по веб-разработке #27
Учебное пособие по CSS Flexbox на хинди | Учебники по веб-разработке #28
Учебник по CSS: единицы em, rem, vh и vw + Объяснение адаптивного дизайна | Учебники по веб-разработке #29
Учебное пособие по CSS: объяснение мультимедийных запросов | Учебные пособия по веб-разработке #30
Учебное пособие по CSS: Дополнительные сведения о селекторах CSS | Учебные пособия по веб-разработке #31
Учебное пособие по CSS: атрибуты и n-е дочерние псевдоселекторы | Учебники по веб-разработке #32
Учебник по CSS: до и после псевдоселекторов | Учебные пособия по веб-разработке #33
Учебное пособие по CSS: тень блока и тень текста | Учебники по веб-разработке #34
Учебник по CSS: переменные и пользовательские свойства | Учебники по веб-разработке #35
Учебник по CSS: Создание анимации и ключевых кадров | Учебные пособия по веб-разработке #36
Учебное пособие по CSS: Создание переходов в CSS | Учебные пособия по веб-разработке #37
Учебное пособие по CSS: преобразование свойства в CSS | Учебные пособия по веб-разработке #38
Создание проекта полностью адаптивного веб-сайта с использованием HTML и CSS на хинди | Учебники по веб-разработке #39
CSS Grid: введение и создание базовой сетки | Учебники по веб-разработке #40
CSS Grid: создание строк и пробелов в сетке | Учебники по веб-разработке #41
CSS Grid: объединение нескольких строк и столбцов в сетке | Учебники по веб-разработке #42
CSS Grid: Autofit & MinMax | Учебные пособия по веб-разработке #43
CSS Grid: создание макетов с использованием области шаблонов сетки | Учебники по веб-разработке #44
Использование медиа-запросов с CSS Grid | Учебники по веб-разработке #45
Введение в JavaScript для внешнего и внутреннего интерфейса | Учебники по веб-разработке #46
Написание JavaScript в браузере и консоль разработчика | Учебники по веб-разработке #47
Переменные, типы данных и операторы в JavaScript | Учебники по веб-разработке #48
Строки в JavaScript | Учебники по веб-разработке #49
Строковые функции в JavaScript | Учебники по веб-разработке #50
Область действия, условия «если-иначе» и регистр переключения в JavaScript | Учебники по веб-разработке #51
Массивы и объекты в JavaScript | Учебники по веб-разработке #52
Функции в JavaScript | Учебные пособия по веб-разработке #53
Учебное пособие по JavaScript: Взаимодействие — Оповещение, Подсказка, Подтверждение | Учебники по веб-разработке #54
Учебник по JavaScript: циклы for, while, forEach, Do While | Учебники по веб-разработке #55
Учебник по JavaScript: навигация по DOM | Учебники по веб-разработке #56
Учебник по JavaScript: события и прослушивание событий | Учебники по веб-разработке #57
Учебник по JavaScript: setInterval и setTimeOut | Учебники по веб-разработке #58
Учебник по JavaScript: дата и время в JavaScript | Учебники по веб-разработке #59
Учебник по JavaScript: стрелочные функции в JavaScript | Учебники по веб-разработке #60
Учебник по JavaScript: математический объект в JavaScript | Учебные пособия по веб-разработке #61
Учебное пособие по JavaScript: работа с JSON в JavaScript | Учебные пособия по веб-разработке #62
Учебное пособие по серверной части: Введение и установка Node.
Js | Учебные пособия по веб-разработке #63
Учебное пособие по серверной части: модули Node.Js с примерами | Учебные пособия по веб-разработке #64
Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #65
Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебники по веб-разработке #66
Учебное пособие по серверной части: создание пользовательской серверной части с помощью NodeJs | Учебные пособия по веб-разработке #67
Учебное пособие по серверной части: создание пользовательских модулей в узле с помощью NodeJs | Учебные пособия по веб-разработке #68
Учебное пособие по серверной части: npm: Учебное пособие по диспетчеру пакетов Node | Учебные пособия по веб-разработке #69
Учебное пособие по серверной части: установка Express и Postman | Учебные пособия по веб-разработке #70
Учебное пособие по серверной части: написание нашего первого экспресс-приложения | Учебники по веб-разработке #71
Backend Tutorial: Статические файлы и установка механизма шаблонов Pug | Учебные пособия по веб-разработке #72
Учебное пособие по бэкенду: Использование необработанного HTML в шаблонизаторе Pug | Учебные пособия по веб-разработке #73
Учебное пособие по серверной части: Завершение серверной части NodeJs нашего веб-сайта Gym | Учебные пособия по веб-разработке #74
Учебное пособие по серверной части: танцевальный веб-сайт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #75
Учебное пособие по серверной части: разработка карт с использованием Pure Pug + NodeJs | Учебники по веб-разработке #76
Backend Tutorial: веб-сайт Continuing Dance с использованием Pug + NodeJs | Учебные пособия по веб-разработке #77
Учебное пособие по бэкенду: добавление раздела спонсора с помощью Pug + NodeJs | Учебные пособия по веб-разработке #78
Учебное пособие по серверной части: добавление контактной формы с помощью Pug + NodeJs | Учебные пособия по веб-разработке #79
Учебное пособие по MongoDb: Введение в MongoDb + установка | Учебные пособия по веб-разработке #80
Учебное пособие по MongoDb.