JavaScriptové řetězce

Obsah

Řetězce JavaScriptu slouží k ukládání a manipulaci s textem.

Řetězec JavaScriptu obsahuje nula nebo více znaků napsaných v uvozovkách.

Příklad

let text = "John Doe";

Zkuste to sami →

<!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>

Můžete použít jednoduché nebo dvojité uvozovky:

Příklad

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

Zkuste to sami →

<!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>

Uvozovky můžete použít uvnitř řetězce, pokud se neshodují s uvozovkami obklopující řetězec:

Příklad

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

Zkuste to sami →

<!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>

Délka struny

Chcete-li zjistit délku řetězce, použijte vestavěnou vlastnost length:

Příklad

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

Zkuste to sami →

<!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>

Útěk postava

Protože řetězce musí být zapsány v uvozovkách, JavaScript tento řetězec špatně pochopí:

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

Řetězec bude přerušen na "Jsme tzv.".

Řešením, jak se tomuto problému vyhnout, je použití escape znaku zpětného lomítka.

Znak escape zpětného lomítka (\) změní speciální znaky na znaky řetězce:

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

Sekvence \" vloží do řetězce dvojité uvozovky:

Příklad

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

Zkuste to sami →

<!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>

Sekvence \' vloží do řetězce jednu uvozovku:

Příklad

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

Zkuste to sami →

<!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>

Sekvence \\ vloží zpětné lomítko do řetězce:

Příklad

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

Zkuste to sami →

<!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>

V JavaScriptu je platných šest dalších escape sekvencí:

\b: Backspace
\f: Form Feed
\n: Nový řádek
\r: Návrat vozíku
\t: Horizontální tabelátor
\v: Vertikální tabelátor

Výše uvedených 6 únikových znaků bylo původně navrženo k ovládání psací stroje, dálnopisy a faxy. V HTML nedávají žádný smysl.

Prolomení dlouhých řádků kódu

Pro nejlepší čitelnost se programátoři často rádi vyhýbají řádkům kódu delším než 80 znaků.

Pokud se příkaz JavaScript nevejde na jeden řádek, nejlepší místo pro přerušení je to po operátorovi:

Příklad

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

Zkuste to sami →

<!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>

Řádek kódu můžete také rozdělit v rámci textového řetězce jedním zpětným lomítkem:

Příklad

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

Zkuste to sami →

<!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>

Metoda \ není preferovanou metodou. Nemusí mít univerzální podporu.
Některé prohlížeče ano nepovolovat mezery za znakem \.

Bezpečnějším způsobem, jak přerušit řetězec, je použít řetězec přidání:

Příklad

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

Zkuste to sami →

<!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>

Řádek kódu nemůžete rozdělit zpětným lomítkem:

Příklad

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

Zkuste to sami →

<!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>

Řetězce JavaScriptu jako objekty

Normálně jsou řetězce JavaScriptu primitivní hodnoty vytvořené z literálů:

let x = "John";

Ale řetězce lze také definovat jako objekty s klíčovým slovem new:

let y = new String("John");

Příklad

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

Zkuste to sami →

<!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>

Nevytvářejte objekty Strings.

Klíčové slovo new kód komplikuje a zpomaluje rychlost provádění.

Objekty typu String mohou způsobit neočekávané výsledky:

Při použití operátoru == jsou x a y rovné:

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

Zkuste to sami →

<!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>

Při použití operátoru === se x a y nerovnají:

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

Zkuste to sami →

<!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>

Všimněte si rozdílu mezi (x==y) a (x===y).

(x == y) pravda nebo ne?

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

Zkuste to sami →

<!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) pravda nebo ne?

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

Zkuste to sami →

<!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>

Porovnání dvou objektů JavaScriptu vždy vrátí hodnotu false.

Kompletní odkaz na řetězec

Úplnou referenci String naleznete na naší stránce:

Kompletní reference JavaScriptového řetězce.

Odkaz obsahuje popisy a příklady všech vlastností a metod řetězců.