Строка JavaScript — это фундаментальная тема, которую должен знать каждый разработчик, независимо от того, специализируетесь ли вы на фронтенд-разработке или на бэкэнд-разработке. Руководство по строкам JavaScript необходимо для хорошего понимания этой темы.
Что такое строка JavaScript?
В JavaScript строка — это последовательность символов, которую можно использовать для представления текста. Строки являются основным типом данных и могут быть как примитивными, так и объектными. Они используются в самых разных контекстах, от простых манипуляций с текстом до сложных алгоритмов обработки строк.
Строки Javascript неизменяемы. Это означает, что вы не можете изменить строку JavaScript после ее создания.
Прежде всего, давайте посмотрим, как создать строку в JavaScript.
Строковые примитивы против строковых объектов
Примитивные строки — это самый простой тип строк в JavaScript. Они неизменны, поэтому их нельзя изменить после создания.
С другой стороны, строковый объект представляет собой оболочку примитивной строки и предоставляет дополнительные методы и свойства для работы со строками.
Строковые объекты создаются с помощью функции-конструктора String() и могут быть изменены с помощью этих методов. Однако изменение строкового объекта не изменяет базовую примитивную строку.
В общем, рекомендуется по возможности использовать примитивные строки, так как они более эффективны и с ними проще работать. Строковые объекты следует использовать только тогда, когда вам нужно воспользоваться их дополнительными методами и свойствами.
Как создать строку JavaScript
Вы можете создать строку в основном двумя способами:
- строковые примитивы, использующие строковые литералы
const str1 = 'This is a string created using single quotes'
const str2 = "This is a string created using double quotes"
const str3 =
`This is a string created using backticks. We can use ${variables} and ${expressions} inside backticks
`
Строковый литерал, указанный в одинарной или двойной кавычке, не имеет значения.
Третий вышеприведенный вариант использует шаблонные литералы (указанные обратными кавычками/обратными кавычками) и также может использоваться при интерполяции строк.
- Строковый объект с использованием конструктора String
const str4 = new String('Это строка, созданная с помощью конструктора String.');
Как упоминалось выше, создание строки с помощью конструктора не рекомендуется, так как это приводит к неожиданному поведению, особенно при сравнении строк.
Как получить длину строки
Вы можете использовать свойство length, чтобы получить длину строкового объекта.
const str = "Hello, World!"; const len = str.length; console.log(len); // output: 13
Спасательный персонаж
При создании строки javascript вы используете двойные или одинарные кавычки. Но что, если вы хотите напечатать что-то вроде приведенного ниже?
Марс, также называемый «Красной планетой», когда-нибудь будет заселен.
Давайте посмотрим, что произойдет, если вы включите это предложение в двойные кавычки.
let text = "Mars, also called “The Red planet” will be inhabited one day."
Это приведет к ошибке: Uncaught SyntaxError: Неожиданный идентификатор «Красная планета»
Причина в том, что JavaSript Ineterpeter будет рассматривать «Марс, также называемый « как строку, назначенную текстовой переменной, и, таким образом, для интерпретатора фраза «Красная планета» не заключена в двойные кавычки, хотя мы с вами можем видеть что из наших собственных глаз.
Итак, как это исправить?
У вас есть два решения в этом конкретном случае.
один из способов - использовать одинарные кавычки внутри двойных кавычек или наоборот.
let text = "Mars, also called 'The Red planet' will be inhabited one day."
Но другой лучший способ — использовать escape-последовательности или escape-символы. Вы можете использовать обратную косую черту, за которой следует двойная или одинарная кавычка.
let text = "Mars, also called \"The Red planet\" will be inhabited one day."
Вы можете использовать escape-символ и обратную косую черту во многих других ситуациях.
Вы можете ввести часть кода в операторе console.log()
и посмотреть, как выглядит результат.
В JavaScript есть больше вариантов использования escape-символов.
- \b — возврат
- \f — подача формы
- \v — вертикальная вкладка
- \xXX — шестнадцатеричная escape-последовательность (например, \x41 для буквы «A»)
- \uXXXX — управляющая последовательность Unicode (например, © для символа авторского права ©)
Добавление длинных строк
Что делать, если у вас есть строка с большим количеством символов? Если вы включите такую строку в одну строку своего кода, другому разработчику может быть сложно прочитать ваш код.
Вы можете избежать добавления длинных строк, используя символ обратной косой черты в кавычках.
const longString = "This is a very long string that goes on and on, \ and it can be difficult to read and work in your code. \ But you can use a backslash to break it up into multiple lines, \ like this. This makes your code easier to read and work with, \ especially when working with long strings like this on a regular basis.";
Однако использование обратной косой черты (\) не рекомендуется, так как некоторые браузеры могут не поддерживать ее в этом случае.
Гораздо лучше использовать оператор + (конкатенация строк).
const longString = "This is a very long string that goes on and on, " + "and it can be difficult to read and work in your code. " + "But you can use the plus (+) operator to concatenate " + "multiple strings into one, like this. This makes your " + "code easier to read and work with, especially when " + "working with long strings like this on a regular basis.";
Литералы шаблонов
Ранее мы создали строку с помощью обратных кавычек (обратных кавычек). Другими словами, мы используем литералы шаблонов в Javascript для создания строки.
Использование литералов шаблонов дает некоторые преимущества. Давайте посмотрим, что это такое.
Когда мы создаем строку с литералами шаблона javascript, вы можете использовать переменную или выражение со строкой. В JavaScript это называется интерполяцией строк.
const name = "John"; const age = 30; const profession = "developer"; console.log(`My name is ${name}, I'm ${age} years old and I work as a ${profession}.`);
Вы также можете использовать выражения.
const x = 10; const y = 5; console.log(`The sum of ${x} and ${y} is ${x + y}.`);//The sum of 10 and 5 is 15.
Использование выражений в литералах шаблонов может упростить создание сложных строк и избежать необходимости конкатенации или функций конкатенации строк, таких как concat()
.
Литералы шаблонов также можно использовать для создания многострочных строк в JavaScript.
let str = `I am a multi-line string created with template literal`; console.log( str); /** output will be like this "I am a multi-line string created with template literal" **/
Доступ к символам в строке
Вы можете получить доступ к отдельным символам двумя способами:
- Используйте встроенный метод
charAt()
.
let str = "developer"; str.charAt( 5 );
2. Используйте скобки
let str = "developer"; console.log(str[5]); // "o"
Примечание:когда вы видите этот синтаксис, похожий на массив, у вас возникнет искушение изменить значение любого символа следующим образом:
str[0] = "D"; console.log(str);
Однако на выходе будет «Разработчик», а НЕ «Разработчик».
Почему?
Это связано с тем, что строки в Javascript неизменяемы. Вы не можете изменить его после того, как вы его создали.
Примечание. Если вам действительно нужно изменить символ в строке, вы можете использовать метод slice()
следующим образом.
let str = "developer"; str = "D" + str.slice(1); console.log(str);
Это выведет «Разработчик», потому что новая строка была создана с желаемыми изменениями.
Неизменяемые строки могут быть полезны в некоторых отношениях, поскольку они предотвращают неожиданные изменения исходной строки и упрощают анализ кода.
Однако важно помнить, что создание новых строк также может быть неэффективным с точки зрения использования памяти и производительности.
Поэтому важно разумно использовать строковые операции.
Конкатенация строк
Ранее я упоминал конкатенацию строк, когда мы говорили о длинных строках в вашем коде.
Поговорим подробнее о конкатенации строк
Если у вас есть две или более строковых переменных, вы можете объединить эти строки в одну строку.
const greeting = "Good morning, "; const question = "How can I help you ?"; const welcome = greeting + question; console.log( welcome );//Good morning, How can I help you ?
Если вы также добавите числа в строку. На выходе будет строка
const userId = "admin" + 1278; console.log( userId ) //admin1278;
JavaScript использует процесс под названием приведение типов (приведение строк) для преобразования одного типа значения в другой тип, когда это необходимо. В случае добавления числа к строке JavaScript преобразует число в строку, а затем объединяет его с другой строкой.
Сравнение строк
Теперь давайте поговорим о сравнении строк
Вы можете использовать ‹, › , ›=, ‹=. ==. === операторы для сравнения строк.
Эти операторы сравнивают коды символов Unicode/символы ASCII, которые представляют символ.
Потому что следующий оператор вернет false, поскольку «a» меньше, чем код символа для «b».
console.log("apple" > "banana");
Но console.log("apple" > "Banana")
вернет true, потому что «a» больше, чем код символа для «B».
В следующей таблице показано условие, применяемое при сравнении строк.
Равенство ( == ) и строгое равенство ( === )
Теперь давайте рассмотрим интересное поведение операторов равенства.
console.log( “10” == 10 ) //true
Это связано с тем, что оператор «==» сравнивает только значения двух строк на равенство, но не сравнивает их типы.
С другой стороны, оператор «===» сравнивает значения двух строк и их типы данных. Это означает, что если две строки имеют одинаковое значение, но разные типы данных, оператор «===» вернет false.
console.log("10" === 10); // false
Обратите внимание, что Неравенство ( !=) и строгое Неравенство (!== ) ведут себя одинаково.
Неожиданное поведение при сравнении строковых объектов
Как вы узнали выше, когда вы сравниваете две примитивные строки с помощью оператора ===
, JavaScript сравнивает значения самих строк.
Однако, когда вы сравниваете примитивную строку со строковым объектом с помощью ===, JavaScript сначала приводит строковый объект к примитивной строке с помощью метода valueOf(), а затем сравнивает две примитивные строки.
Это может привести к неожиданным результатам, если вы не знаете, как работает сравнение.
let string1 = "developer"; let string2 = new String("developer"); console.log(string1 === string2); // Output: false
Если вам нужно сравнить примитивную строку со строковым объектом, вы можете использовать метод toString()
для явного преобразования строкового объекта в примитивную строку перед сравнением.
также рассмотрим следующие примеры
let string1 = new String("developer"); let string2 = new String("developer"); console.log( string1 == string2 )//output false onsole.log( string1 === string2 )//output false
Как упоминалось ранее, здесь вы также можете использовать метод toString()
для явного преобразования строковых объектов перед сравнением.
Но в целом избегайте создания строк как строковых объектов и по возможности используйте строковые литералы.
Строковые методы Javascript
Объект Javascript String имеет множество встроенных методов для работы со строками.
Некоторые из наиболее полезных методов, с которыми вы столкнетесь, перечислены ниже.
Вы можете узнать о том, как использовать методы substring()
в этом посте.
Подведение итогов
В этом руководстве по строке javascript вы узнаете, как создать строку javascript, используя строковые литералы, литералы шаблонов и строковые конструкторы.
Вы узнали, какой из них рекомендуется, а какой следует избегать. Мы также говорим о получении длины строки, доступе к символу в строке, конкатенации строк и так далее.
Я надеюсь, что это исчерпывающее руководство поможет вам стать конкурентоспособным разработчиком JavaScript.