Строки JavaScript

Оглавление

    Показать оглавление

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

Строка JavaScript представляет собой ноль или более символов, заключенных в кавычки.

Пример

let text = "John Doe";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
let text = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Вы можете использовать одинарные или двойные кавычки:

Пример

let carName1 = "Volvo XC60";  
  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Strings are written inside quotes. You can use single or double quotes:</p>

<p id="demo"></p>

<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>

</body>
</html>

Вы можете использовать кавычки внутри строки, если они не соответствуют кавычкам. вокруг строки:

Пример

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>

<p id="demo"></p>

<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>

</body>
</html>

Длина строки

Чтобы узнать длину строки, используйте встроенное свойство length:

Пример

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>

Побег персонажа

Поскольку строки должны быть записаны в кавычках, JavaScript неправильно интерпретирует эту строку:

let text = "We are the so-called "Vikings" from the north.";

Строка будет обрезана до «Мы так называемые».

Чтобы избежать этой проблемы, можно использовать управляющий символ обратной косой черты.

Обратная косая черта (\) превращает специальные символы в строковые символы:

Code Result Description
\' ' Single quote
\" " Double quote
\\ \ Backslash

Последовательность \" вставляет в строку двойную кавычку:

Пример

let text = "We are the so-called \"Vikings\" from the north.";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \" inserts a double quote in a string.</p>

<p id="demo"></p>

<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Последовательность \' вставляет в строку одинарную кавычку:

Пример

let text= 'It\'s alright.';

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \' inserts a single quote in a string.</p>

<p id="demo"></p>

<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Последовательность \\ вставляет обратную косую черту в строку:

Пример

let text = "The character \\ is called backslash.";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

<p id="demo"></p>

<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

В JavaScript допустимы еще шесть escape-последовательностей:

\b

Backspace

\f

Подача формы

\n

Новая линия

\r

Возврат каретки

\t

Горизонтальный табулятор

\v

Вертикальный табулятор

Шесть escape-символов, представленных выше, изначально были созданы для управления пишущие машинки, телетайпы и факсы. Они не имеют никакого смысла в HTML.

Разрыв длинных строк кода

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

Если оператор JavaScript не умещается в одной строке, лучшее место для разрыва это после оператора:

Пример

document.getElementById("demo").innerHTML =
"Hello Dolly!";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

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

Пример

document.getElementById("demo").innerHTML = 
"Hello \
Dolly!";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

Метод \ не является предпочтительным. Возможно, он не имеет универсальной поддержки.
Некоторые браузеры поддерживают не допускать пробелов после символа \.

Более безопасный способ разбить строку — использовать строку добавление:

Пример

document.getElementById("demo").innerHTML = "Hello " + 
"Dolly!";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

Вы не можете разбить строку кода обратной косой чертой:

Пример

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

Строки JavaScript как объекты

Обычно строки JavaScript представляют собой примитивные значения, созданные из литералов:

let x = "John";

Но строки также можно определить как объекты с помощью ключевого слова new:

let y = new String("John");

Пример

let x = "John";
let y = new String("John");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
// x is a string
let x = "John";

// y is an object
let y = new String("John");

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

Не создавайте объекты Strings.

Ключевое слово new усложняет код и замедляет скорость выполнения.

Строковые объекты могут давать неожиданные результаты:

При использовании оператора == x и y равны:

let x = "John";
let y = new String("John");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

При использовании оператора === x и y не равны:

let x = "John";
let y = new String("John");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Обратите внимание на разницу между (x==y) и (x===y).

(x == y) true или false?

let x = new String("John");
let y = new String("John");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) true или false?

let x = new String("John");
let y = new String("John");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Сравнение двух объектов JavaScript всегда возвращает false.

Полная ссылка на строку

Для получения полной справки по строкам перейдите по ссылке:

Полное руководство по строкам JavaScript.

Справочник содержит описания и примеры всех строковых свойств и методов.