Строки в javascript: Методы строк в JavaScript: простая шпаргалка с примерами

Leave a Comment / Разное / By /

Содержание

Строки | JavaScript Camp

В JavaScript любые текстовые 📜 данные являются строками. Однако, не забывайте, что в строке могут быть записаны и числа. Пожалуй, из всех типов данных строками вы будете пользоваться наиболее часто. Разберем все варианты создания🏗️ новой строки.

Видео​

Одинарные или двойные кавычки​

Для создания🏗️ строки используются либо ‘одинарные’, либо “двойные” кавычки.

let single = 'Hello World'
let double = "Hello World" // prettier-ignore

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

let double = "Don't you think so, d'Artagnan?"
let single = '"I think so, indeed!" - cried he.'

Обратный слэш​

Если внутри строки используются те же кавычки, что стоят и снаружи, то их нужно экранировать при помощи обратного слэша — так называемого «символа экранирования». Он добавляется ➕ перед входящей в строку кавычкой \', чтобы она не обозначала окончание строки.

// prettier-ignore function learnJavaScript() { let backticks = ‘It\’s not complicated’ return backticks }

Loading…

Заметим, что обратный слеш \ служит лишь для корректного прочтения строки интерпретатором, но он не записывается 🖊️ в строку после её прочтения. Когда строка сохраняется в оперативную память, в неё не добавляется ➕ символ \. Вы можете явно увидеть это в выводах.

Обратные кавычки​

В написании строки можно обойтись и без обратного слэша, если использовать `обратные` кавычки.

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные JavaScript выражения, обернув их в символ доллара с фигурными скобками ${…} 👇 :

function learnJavaScript() { let name = ‘Марк’ return `Привет, ${name}!` }

Loading. ..

Интерполяция строк — это удобный способ подставлять значения переменных в строки. Шаблонная строка это тоже самое, что и интерполяция. Шаблонная строка в ES6 пришла на замену обычной строке. Интерполяция работает только с обратными кавычками. Посмотрим на практике, какие правила существует при использовании интерполяций.

Еще одно преимущество обратных кавычек – они могут занимать более одной строки.

function learnJavaScript() { let guestList = `Guests: * John * Pete * Mary ` return guestList }

Loading…

Многострочные строки также можно создавать🏗️ с помощью одинарных и двойных кавычек, используя так называемый «символ перевода строки», который записывается как \n. Все спецсимволы, в JavaScript, начинаются с обратного слеша \ Правда проверить мы это можем в консоле браузера(LIVE EDITOR отображает не корректно).

let guestList = 'Guests:\n * John\n * Pete\n * Mary'
guestList // список гостей, состоящий из нескольких строк

Строки неизменяемы​

Содержимое строки в JavaScript нельзя изменить. Нельзя взять символ посередине и заменить его. Как только строка создана🏗️ — она такая навсегда. Можно создать🏗️ новую строку и записать её в ту же самую переменную вместо старой.

function learnJavaScript() { let str = ‘Hi’ str = ‘P’ + str[1] // заменяем строку return str }

Loading…

Популярные методы строк​

Длина строки​

Свойство length возвращает🔄 количество кодовых📟 значений в строке.

function learnJavaScript() { let str = ‘My\n’.length return str }

Loading…

Обратите внимание, \n — это один спецсимвол, поэтому здесь всё правильно: длина строки 3.

Доступ к символам​

Существует два 2️⃣ способа добраться до конкретного символа в строке. В первом способе используется метод charAt(). Первый 1️⃣ символ занимает нулевую позицию:

function learnJavaScript() { let str = ‘cat’.charAt(2) return str }

Loading…

Получить символ также можно с помощью квадратных скобок:

function learnJavaScript() { let str = ‘cat'[2] return str }

Loading…

Квадратные скобки — современный способ получить символ, в то время как

charAt существует в основном по историческим причинам.

Изменение регистра символов​

Чтобы преобразовать буквы строки в заглавные, используйте метод toUpperCase().

function learnJavaScript() { let str = ‘Interface’.toUpperCase() return str }

Loading…

в строчные toLowerCase()

function learnJavaScript() { let str = ‘Interface’.toLowerCase() return str }

Loading…

Конкатенaция(сцепление) строки​

Чтобы построить строку из существующих строк, используйте знак плюс + для объединения строк.

let name = 'Mary '
let activity = 'drink tea'
let bio = 'Our guest ' + name + activity + '.'
bio // Our guest Mary drink tea.

Вот мы и познакомились с самым популярным типом данных в JavaScript и самыми часто используемыми методами к нему.

React Native​

Посмотрим на практический пример как мы можем использовать строки при создании мобильного приложения. Здесь мы создаем константу str и присваиваем ей значение Hello world. Напомню, что для того чтобы в синтаксис JSX вставлять JavaScript выражения, необходимо использовать фигурные скобки.

Проблемы?​

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:​

Как в JavaScript не записываются строки ___?

  1. в одинарных кавычках
  2. в обратных слэшах
  3. в обратных кавычках

Для чего в строке не используется обратный слэш?

  1. Для экранирования
  2. Для записи спецсимволов
  3. Для окончания строки

Выберете «символ перевода строки»

  1. \n
  2. \
  3. \*

Какую букву вернет 'sport'[3]?

  1. o
  2. r
  3. Ничего не вернет

Как изменить символ в строке JavaScript?

  1. Изменить строку
  2. Добраться до символа и заменить его
  3. Создать новую строку и записать её в ту же самую переменную вместо старой

Какой метод используется, чтобы сделать буквы заглавными?

  1. toUpperCase()
  2. toLowerCase()
  3. toLowercase()

Какой знак используется для объединения строк?

  1. =
  2. +
  3. +=

Всякий раз, когда у вас есть открывающая ____, вам всегда нужно иметь закрывающую ____.

  1. точка
  2. кавычка
  3. переменая

Строка состоит из одного или нескольких отдельных ___.

  1. символов
  2. аргументов
  3. параметров

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

Сcылки:​

  1. MDN web docs
  2. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript — Jeremy Moritz
  3. JavaScript.ru

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Alena Yanbukhtina
📖
Dmitriy Vasilev
💵
Resoner2005
🐛 🎨 🖋

Обход строк в цикле | Основы JavaScript

Для перемещения по курсу нужно зарегистрироваться

1. Введение ↳ теория

2. Hello, World! ↳ теория / тесты / упражнение

3. Инструкции ↳ теория / тесты / упражнение

4. Арифметические операции ↳ теория / тесты / упражнение

5. Ошибки оформления (синтаксиса и линтера) ↳ теория / тесты / упражнение

6. Строки ↳ теория / тесты / упражнение

7. Переменные ↳ теория / тесты / упражнение

8. Выражения в определениях ↳ теория / тесты / упражнение

9. Именование ↳ теория / тесты / упражнение

10. Интерполяция ↳ теория / тесты / упражнение

11. Извлечение символов из строки ↳ теория / тесты / упражнение

12. Типы данных ↳ теория / тесты / упражнение

13. Неизменяемость и примитивные типы ↳ теория / тесты / упражнение

14. Функции и их вызов ↳ теория / тесты / упражнение

15. Сигнатура функции ↳ теория / тесты / упражнение

16. Вызов функции — выражение ↳ теория / тесты / упражнение

17. Функции с переменным числом параметров ↳ теория / тесты / упражнение

18. Детерминированность ↳ теория / тесты / упражнение

19. Стандартная библиотека ↳ теория / тесты / упражнение

20. Свойства и методы ↳ теория / тесты / упражнение

21. Цепочка вызовов ↳ теория / тесты / упражнение

22. Определение функций ↳ теория / тесты / упражнение

23. Возврат значений ↳ теория / тесты / упражнение

24. Параметры функций ↳ теория / тесты / упражнение

25. Необязательные параметры функций ↳ теория / тесты / упражнение

26. Упрощенный синтаксис функций ↳ теория / тесты / упражнение

27. Логика ↳ теория / тесты / упражнение

28. Логические операторы ↳ теория / тесты / упражнение

29. Результат логических операций ↳ теория / тесты / упражнение

30. Условные конструкции ↳ теория / тесты / упражнение

31. Тернарный оператор ↳ теория / тесты / упражнение

32. Конструкция Switch ↳ теория / тесты / упражнение

33. Цикл while ↳ теория / тесты / упражнение

34. Агрегация данных ↳ теория / тесты / упражнение

35. Обход строк в цикле ↳ теория / тесты / упражнение

36. Условия внутри тела цикла ↳ теория / тесты / упражнение

37. Инкремент и декремент ↳ теория / тесты / упражнение

38. Цикл for ↳ теория / тесты / упражнение

39. Модули ↳ теория / тесты / упражнение

Испытания

1. Фибоначчи

2. Найди Fizz и Buzz

3. Переворот числа

4. Счастливый билет

5. Фасад

6. Идеальные числа

7. Инвертированный регистр

8. Счастливые числа

Порой обучение продвигается с трудом. Сложная теория, непонятные задания… Хочется бросить. Не сдавайтесь, все сложности можно преодолеть. Рассказываем, как

Не понятна формулировка, нашли опечатку?

Выделите текст, нажмите ctrl + enter и опишите проблему, затем отправьте нам. В течение нескольких дней мы улучшим формулировку или исправим опечатку

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

  1. Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
  2. Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно, дайте ссылку на ваше решение. Обратите внимание — команда поддержки не отвечает на вопросы по коду, но поможет разобраться с заданием или выводом тестов
  3. Мы отвечаем на сообщения в течение 2-3 дней. К «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

Ссылка на строку 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.

Это нестандартные методы, и они могут работать не так, как ожидалось.

Метод Описание
якорь() Отображает строку как якорь
большой() Отображает строку крупным шрифтом
мерцание() Отображает мигающую строку
полужирный() Отображает строку жирным шрифтом
фиксированный() Отображает строку, используя шрифт с фиксированным шагом
цвет шрифта() Отображает строку с использованием указанного цвета
размер шрифта() Отображает строку указанного размера
курсив() Выводит строку курсивом
ссылка() Отображает строку как гиперссылку
маленький() Отображает строку с использованием мелкого шрифта
удар() Отображает строку с зачеркиванием
суб() Отображает строку как текст нижнего индекса
поддержка() Отображает строку в виде надстрочного текста

❮ Предыдущий Далее ❯


4 способа комбинирования строк в JavaScript

Вот 4 способа комбинирования строк в JavaScript. Мой любимый способ — использовать строки шаблонов. Почему? Потому что это более читабельно, без обратной косой черты для выхода из кавычек, без неудобного разделителя пустого пространства и без беспорядочных операторов плюса 👏

  • 1. Строки шаблона
    • Проблема отсутствия пробела в конкатенации строк
    • Решено с помощью строк шаблона
  • 2. JOIN ()
    • Настройка сепаратора
  • 3. Concat ()
    • Сочетание строки с массивом
  • 4. Plus Proshiator (+)
  • 4. Plus Proshiator (+)
  • 4. Plus Proshiator (+)
  • . Экранирование символов в строках
    • Экранирование одинарных кавычек или апострофов (‘)
    • Экранирование двойных кавычек («)
    • Экранирование обратной кавычки (`)
  • Какой способ использовать?
    • Почему другие способы все еще имеют значение?
  • Поддержка браузера
  • Ресурсы

    • 1.

    Строки шаблона

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

    Проблема отсутствия пробела в конкатенации строк

    Перед строками шаблона это будет результат моей строки 😫

    ☝️ Уловили мою ошибку? Мне не хватает места 😫. И это очень распространенная проблема при объединении строк.

    Устранено с помощью строк шаблона

    С помощью строк шаблона это устранено. Вы пишете именно так, как хотите, чтобы ваша строка выглядела. Так что очень легко обнаружить, если пробел отсутствует. Теперь супер читабельно, ура! 👏

    2. join()

    Метод join объединяет элементы массива и возвращает строку. Поскольку он работает с массивом, это очень удобно, если вы хотите добавить дополнительные строки.

    Настроить разделитель

    Самое замечательное в join то, что вы можете настроить способ объединения элементов массива. Вы можете сделать это, передав разделитель в его параметре.

    3. concat()

    С помощью concat вы можете создать новую строку, вызвав метод для строки.

    Объединение строки с массивом

    Вы также можете использовать concat для объединения строки с массивом. Когда я передаю аргумент массива, он автоматически преобразует элементы массива в строку, разделенную запятой , .

    Если вы хотите, чтобы он был лучше отформатирован, мы можем использовать join для настройки нашего разделителя.

    4. Оператор плюса (+)

    Одна интересная вещь об использовании оператора + при объединении строк. Вы можете использовать для создания новой строки или изменить существующую строку, добавив к ней.

    Немутативный

    Здесь мы используем + для создания совершенно новой строки.

    Мутативный

    Мы также можем добавить его к существующей строке, используя += . Так что, если по какой-то причине вам нужен мутативный подход, это может быть вариантом для вас.

    Блин 😱 Опять пробел забыл. ВИДЕТЬ! Так легко пропустить пробел при объединении строк.

    Это все еще кажется таким грязным, давайте добавим туда присоединиться к !

    Экранирование символов в строках

    Если в вашей строке есть специальные символы, вам нужно будет сначала экранировать эти символы при объединении. Давайте рассмотрим несколько сценариев и посмотрим, как мы можем их избежать 💪

    Экранирование одинарных кавычек или апострофов (‘)

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

    Конечно, вы также можете использовать обратную косую черту \ для экранирования символов. Но я нахожу это немного трудным для чтения, поэтому я не часто делаю это таким образом.

    Поскольку в строках шаблона используется обратная кавычка, этот сценарий к нему не применяется 👍

    Экранирование двойных кавычек («»)

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

    И да, также можно использовать обратную косую черту

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

    Поскольку другие создания строк не используют обратную кавычку, этот сценарий к ним не применяется 👍

    Какой способ использовать?

    Я показал несколько примеров использования различных способов объединения строк. Какой способ лучше, все зависит от ситуации. Когда дело доходит до стилистических предпочтений, мне нравится следовать руководству по стилю Airbnb.

    При программном построении строк используйте шаблонные строки вместо конкатенации.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *