JavaScript-strenge

Indholdsfortegnelse

JavaScript-strenge er til lagring og manipulation af tekst.

En JavaScript-streng er nul eller flere tegn skrevet inden for anførselstegn.

Eksempel

let text = "John Doe";

Prøv det selv →

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

Du kan bruge enkelte eller dobbelte anførselstegn:

Eksempel

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

Prøv det selv →

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

Du kan bruge anførselstegn inde i en streng, så længe de ikke matcher anførselstegnene omkring strengen:

Eksempel

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

Prøv det selv →

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

Strengelængde

For at finde længden af en streng skal du bruge den indbyggede længde egenskab:

Eksempel

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

Prøv det selv →

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

Flugt karakter

Fordi strenge skal skrives inden for anførselstegn, vil JavaScript misforstå denne streng:

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

Snoren vil blive hugget til "Vi er de såkaldte".

Løsningen til at undgå dette problem er at bruge escape-tegnet for backslash.

Omvendt skråstreg (\) escape-tegnet gør specialtegn til strengtegn:

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

Sekvensen \" indsætter et dobbelt anførselstegn i en streng:

Eksempel

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

Prøv det selv →

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

Sekvensen \' indsætter et enkelt anførselstegn i en streng:

Eksempel

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

Prøv det selv →

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

Sekvensen \\ indsætter en omvendt skråstreg i en streng:

Eksempel

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

Prøv det selv →

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

Seks andre escape-sekvenser er gyldige i JavaScript:

\b: Backspace
\f: Form feed
\n: Ny linje
\r: Vognretur
\t: Vandret tabulator
\v: Lodret tabulator

De 6 escape-karakterer ovenfor blev oprindeligt designet til at kontrollere skrivemaskiner, fjernskrivere og faxmaskiner. De giver ingen mening i HTML.

Bryde lange kodelinjer

For den bedste læsbarhed vil programmører ofte gerne undgå kodelinjer længere end 80 tegn.

Hvis en JavaScript-erklæring ikke passer på én linje, er det bedste sted at bryde det er efter en operatør:

Eksempel

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

Prøv det selv →

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

Du kan også opdele en kodelinje inden for en tekststreng med en enkelt omvendt skråstreg:

Eksempel

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

Prøv det selv →

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

Metoden \ er ikke den foretrukne metode. Det har muligvis ikke universel understøttelse.
Nogle browsere har Tillad ikke mellemrum bag tegnet \.

En mere sikker måde at bryde en streng op på er at bruge streng tilføjelse:

Eksempel

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

Prøv det selv →

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

Du kan ikke bryde en kodelinje op med en omvendt skråstreg:

Eksempel

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

Prøv det selv →

<!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-strenge som objekter

Normalt er JavaScript-strenge primitive værdier, skabt ud fra bogstaver:

let x = "John";

Men strenge kan også defineres som objekter med søgeordet new:

let y = new String("John");

Eksempel

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

Prøv det selv →

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

Opret ikke Strings-objekter.

nye søgeordet komplicerer koden og sænker udførelseshastigheden.

Strengobjekter kan give uventede resultater:

Når du bruger == operatoren, er x og y lige:

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

Prøv det selv →

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

Når du bruger === operatoren, er x og y ikke ens:

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

Prøv det selv →

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

Bemærk forskellen mellem (x==y) og (x===y).

(x == y) sand eller falsk?

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

Prøv det selv →

<!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) sand eller falsk?

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

Prøv det selv →

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

Sammenligning af to JavaScript-objekter returnerer altid falsk.

Komplet strengreference

For en komplet strengreference, gå til vores:

Komplet JavaScript-strengreference.

Referencen indeholder beskrivelser og eksempler på alle strengegenskaber og metoder.