JavaScript-strängar är till för att lagra och manipulera text.
En JavaScript-sträng är noll eller fler tecken skrivna inom citattecken.
let text = "John Doe";
Prova själv →
<!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 använda enkla eller dubbla citattecken:
let carName1 = "Volvo XC60";
// Double quotes
let carName2 = 'Volvo XC60'; // Single quotes
Prova själv →
<!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 använda citattecken i en sträng, så länge de inte matchar citattecken runt strängen:
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';
Prova själv →
<!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>
För att hitta längden på en sträng använder du den inbyggda egenskapen length
:
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
Prova själv →
<!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>
Eftersom strängar måste skrivas inom citattecken kommer JavaScript att missförstå denna sträng:
let text = "We are the so-called "Vikings" from the north.";
Snöret kommer att huggas till "Vi är de så kallade".
Lösningen för att undvika detta problem är att använda escape-tecknet omvänt snedstreck.
Omvänt snedstreck (\
) escape-tecken förvandlar specialtecken till strängtecken:
Code | Result | Description |
---|---|---|
\' | ' | Single quote |
\" | " | Double quote |
\\ | \ | Backslash |
Sekvensen \"
infogar ett dubbelt citattecken i en sträng:
let text = "We are the so-called \"Vikings\" from the north.";
Prova själv →
<!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 \'
infogar ett enda citattecken i en sträng:
let text= 'It\'s alright.';
Prova själv →
<!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 \\
infogar ett snedstreck i en sträng:
let text = "The character \\ is called backslash.";
Prova själv →
<!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>
Sex andra escape-sekvenser är giltiga i JavaScript:
Backsteg
Form Feed
Ny linje
Vagnretur
Horisontell tabulator
Vertikal tabulator
De 6 flyktkaraktärerna ovan designades ursprungligen för att kontrollera skrivmaskiner, teletyper och faxmaskiner. De har ingen mening i HTML.
För bästa läsbarhet vill programmerare ofta undvika kodrader längre än 80 tecken.
Om ett JavaScript-uttryck inte får plats på en rad är det bästa stället att bryta det är efter en operatör:
document.getElementById("demo").innerHTML =
"Hello Dolly!";
Prova själv →
<!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 också dela upp en kodrad inom en textsträng med ett enda snedstreck:
document.getElementById("demo").innerHTML =
"Hello \
Dolly!";
Prova själv →
<!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 \
är inte den föredragna metoden. Det kanske inte har universellt stöd.
Vissa webbläsare har det tillåt inte mellanslag bakom tecknet \
.
Ett säkrare sätt att bryta upp en sträng är att använda sträng tillägg:
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
Prova själv →
<!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 inte dela upp en kodrad med ett snedstreck:
document.getElementById("demo").innerHTML = \
"Hello Dolly!";
Prova själv →
<!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>
Normalt är JavaScript-strängar primitiva värden, skapade av bokstavliga ord:
let x = "John";
Men strängar kan också definieras som objekt med nyckelordet new
:
let y = new String("John");
let x = "John";
let y = new String("John");
Prova själv →
<!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>
Skapa inte Strings-objekt.
Nyckelordet nya
komplicerar koden och saktar ner körningshastigheten.
Strängobjekt kan ge oväntade resultat:
När du använder operatorn ==
är x och y lika:
let x = "John";
let y = new String("John");
Prova själv →
<!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 använder operatorn ===
är x och y inte lika:
let x = "John";
let y = new String("John");
Prova själv →
<!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>
Observera skillnaden mellan (x==y)
och (x===y)
.
(x == y)
sant eller falskt?
let x = new String("John");
let y = new String("John");
Prova själv →
<!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)
sant eller falskt?
let x = new String("John");
let y = new String("John");
Prova själv →
<!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>
Att jämföra två JavaScript-objekt returnerar alltid false.
För en fullständig strängreferens, gå till vår:
Komplett JavaScript-strängreferens.
Referensen innehåller beskrivningar och exempel på alla strängegenskaper och metoder.