JavaScript-strängar


Innehållsförteckning

    Visa innehållsförteckning

JavaScript-strängar är till för att lagra och manipulera text.

En JavaScript-sträng är noll eller fler tecken skrivna inom citattecken.

Exempel

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:

Exempel

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:

Exempel

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>



Stränglängd

För att hitta längden på en sträng använder du den inbyggda egenskapen length:

Exempel

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>



Escape karaktär

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:

Exempel

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:

Exempel

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:

Exempel

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:

\b

Backsteg

\f

Form Feed

\n

Ny linje

\r

Vagnretur

\t

Horisontell tabulator

\v

Vertikal tabulator

De 6 flyktkaraktärerna ovan designades ursprungligen för att kontrollera skrivmaskiner, teletyper och faxmaskiner. De har ingen mening i HTML.


Bryter långa kodlinjer

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:

Exempel

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:

Exempel

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:

Exempel

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:

Exempel

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>

JavaScript-strängar som objekt

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");

Exempel

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.

Komplett strängreferens

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.