Строка JavaScript — это фундаментальная тема, которую должен знать каждый разработчик, независимо от того, специализируетесь ли вы на фронтенд-разработке или на бэкэнд-разработке. Руководство по строкам JavaScript необходимо для хорошего понимания этой темы.

Что такое строка JavaScript?

В JavaScript строка — это последовательность символов, которую можно использовать для представления текста. Строки являются основным типом данных и могут быть как примитивными, так и объектными. Они используются в самых разных контекстах, от простых манипуляций с текстом до сложных алгоритмов обработки строк.

Строки Javascript неизменяемы. Это означает, что вы не можете изменить строку JavaScript после ее создания.

Прежде всего, давайте посмотрим, как создать строку в JavaScript.

Строковые примитивы против строковых объектов

Примитивные строки — это самый простой тип строк в JavaScript. Они неизменны, поэтому их нельзя изменить после создания.

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

Строковые объекты создаются с помощью функции-конструктора String() и могут быть изменены с помощью этих методов. Однако изменение строкового объекта не изменяет базовую примитивную строку.

В общем, рекомендуется по возможности использовать примитивные строки, так как они более эффективны и с ними проще работать. Строковые объекты следует использовать только тогда, когда вам нужно воспользоваться их дополнительными методами и свойствами.

Как создать строку JavaScript

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

  1. строковые примитивы, использующие строковые литералы
  • 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`

Строковый литерал, указанный в одинарной или двойной кавычке, не имеет значения.

Третий вышеприведенный вариант использует шаблонные литералы (указанные обратными кавычками/обратными кавычками) и также может использоваться при интерполяции строк.

  1. Строковый объект с использованием конструктора 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"     
**/

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

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

  1. Используйте встроенный метод 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.