String length String slice() String substring() String substr() String replace() String replaceAll() String toUpperCase() String toLowerCase() String concat() String trim() String trimStart() String trimEnd() String padStart() String padEnd() String charAt() String charCodeAt() String split()
Sträng sökning metoder behandlas i nästa kapitel.
Egenskapen length
returnerar längden på en sträng:
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>
Det finns tre metoder för att extrahera en del av en sträng:
slice(start, end)
substring(start, end)
substr(start, length)
slice()
extraherar en del av en sträng och returnerar extraherad del i en ny sträng.
Metoden tar 2 parametrar: startposition och slutposition (slutet ingår ej).
Skär ut en del av ett snöre från position 7 till position 13:
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
JavaScript räknar positioner från noll.
Första positionen är 0.
Andra plats är 1.
Om du utelämnar den andra parametern kommer metoden att skära ut resten av strängen:
let text = "Apple, Banana, Kiwi";
let part = text.slice(7);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>Extract a part of a string from position 7:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
Om en parameter är negativ, räknas positionen från slutet av strängen:
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>Extract a part of a string counting from the end:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
Det här exemplet skär ut en del av en sträng från position -12 till position -6:
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>Extract a part of a string and return the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
substring()
liknar slice()
.
Skillnaden är att start- och slutvärden mindre än 0 behandlas som 0 tum substring()
.
let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>
</body>
</html>
Om du utelämnar den andra parametern kommer substring()
att dela ut resten av sträng.
substr()
liknar slice()
.
Skillnaden är att den andra parametern anger längden av den extraherade delen.
let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>
</body>
</html>
Om du utelämnar den andra parametern kommer substr()
att dela ut resten av sträng.
let str = "Apple, Banana, Kiwi";
let part = str.substr(7);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>
</body>
</html>
Om den första parametern är negativ, räknas positionen från slutet av sträng.
let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>
</body>
</html>
Metoden replace()
ersätter ett angivet värde med ett annat värde i en sträng:
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>
Metoden replace()
ändrar inte strängen den anropas på.
Metoden replace()
returnerar en ny sträng.
Metoden replace()
ersätter endast den första matchningen
Om du vill ersätta alla matchningar, använd ett reguljärt uttryck med flaggan /g. Se exempel nedan.
Som standard ersätter metoden replace()
endast den första matchningen:
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>
Som standard är metoden replace()
skiftlägeskänslig. Skriver MICROSOFT (med versaler) fungerar inte:
let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("MICROSOFT","W3Schools");
}
</script>
<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>
</body>
</html>
För att ersätta skiftlägesokänsligt, använd ett reguljärt uttryck med en /i
-flagga (okänslig):
let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/MICROSOFT/i,"W3Schools");
}
</script>
</body>
</html>
Reguljära uttryck skrivs utan citattecken.
För att ersätta alla matchningar, använd ett reguljärt uttryck med en /g
-flagga (global matchning):
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/Microsoft/g,"W3Schools");
}
</script>
</body>
</html>
Du kommer att lära dig mycket mer om reguljära uttryck i kapitlet JavaScript Regular Uttryck.
2021 introducerade JavaScript strängmetoden replaceAll()
:
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>
<p>ES2021 intoduced the string method replaceAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Metoden replaceAll()
låter dig ange en reguljärt uttryck istället för en sträng som ska ersättas.
Om parametern är ett reguljärt uttryck måste den globala flaggan (g) ställas in, annars ett TypeError visas.
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>
<p>ES2021 intoduced the string method replaceAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
replaceAll()
är en ES2021-funktion.
replaceAll()
fungerar inte i Internet Explorer.
En sträng konverteras till versaler med toUpperCase()
:
En sträng konverteras till gemener med toLowerCase()
:
let text1 = "Hello World!";
let text2 = text1.toUpperCase();
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toUpperCase();
}
</script>
</body>
</html>
let text1 = "Hello World!"; // String
let text2 = text1.toLowerCase(); // text2 is text1
converted to lower
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Convert string to lower case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toLowerCase();
}
</script>
</body>
</html>
concat()
förenar två eller flera strängar:
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String</h1>
<h2>The concat() Method</h2>
<p>The concat() method joins two or more strings:</p>
<p id="demo"></p>
<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>
</body>
</html>
Metoden concat()
kan användas istället för plusoperatorn. Dessa två rader gör samma sak:
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");
Alla strängmetoder returnerar en ny sträng. De ändrar inte den ursprungliga strängen.
Formellt sagt:
Strängar är oföränderliga: Strängar kan inte ändras, bara ersättas.
Metoden trim()
tar bort blanksteg från båda sidor av en sträng:
let text1 = " Hello World! ";
let text2 = text1.trim();
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trim();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
ECMAScript 2019 lade till strängmetoden trimStart()
till JavaScript. <p>Metoden trimStart()
fungerar som trim()
, men tar bara bort blanksteg från början av ett snöre.
let text1 = " Hello World! ";
let text2 = text1.trimStart();
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimStart();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
JavaScript-strängen trimStart()
stöds i alla moderna webbläsare sedan januari 2020:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ECMAScript 2019 lade till strängmetoden trimEnd()
till JavaScript. <p>Metoden trimEnd()
fungerar som trim()
, men tar bara bort blanksteg från slutet av ett snöre.
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
JavaScript-strängen trimEnd()
stöds i alla moderna webbläsare sedan januari 2020:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ECMAScript 2017 lade till två nya strängmetoder i JavaScript: padStart()
och padEnd()
för att stödja utfyllnad i början och slutet av en sträng.
Metoden padStart()
fyller en sträng från början.
Den fyller en sträng med en annan sträng (flera gånger) tills den når en given längd.
Vadd en sträng med "0" tills den når längden 4:
let text = "5";
let padded = text.padStart(4,"0");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
text = text.padStart(4,"0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Vadd ett snöre med "x" tills det når längden 4:
let text = "5";
let padded = text.padStart(4,"x");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>
</body>
</html>
Metoden padStart()
är en strängmetod.
För att fylla ett nummer, konvertera numret till en sträng först.
Se exemplet nedan.
let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>
</body>
</html>
padStart()
är en ECMAScript 2017-funktion.
Det stöds i alla moderna webbläsare:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
padStart()
stöds inte i Internet Explorer.
Metoden padEnd()
fyller ut en sträng från slutet.
Den fyller en sträng med en annan sträng (flera gånger) tills den når en given längd.
let text = "5";
let padded = text.padEnd(4,"0");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>
<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
text = text.padEnd(4,"0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
let text = "5";
let padded = text.padEnd(4,"x");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>
<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>
</body>
</html>
Metoden padEnd()
är en strängmetod.
För att fylla ett nummer, konvertera numret till en sträng först.
Se exemplet nedan.
let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>
<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>
</body>
</html>
padEnd()
är en ECMAScript 2017-funktion.
Det stöds i alla moderna webbläsare:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
padEnd()
stöds inte i Internet Explorer.
Det finns tre metoder för att extrahera strängtecken:
charAt(position)
charCodeAt(position)
Tillgång till egendom [ ]
Metoden charAt()
returnerar tecknet vid en angiven index (position) i en sträng:
let text = "HELLO WORLD";
let char = text.charAt(0);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String</h1>
<h2>The charAt() Method</h2>
<p>The charAt() method returns the character at a given position in a string:</p>
<p id="demo"></p>
<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>
</body>
</html>
Metoden charCodeAt()
returnerar tecknets unicode vid ett angivet index i en sträng:
Metoden returnerar en UTF-16-kod (ett heltal mellan 0 och 65535).
let text = "HELLO WORLD";
let char = text.charCodeAt(0);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String</h1>
<h2>The charCodeAt() Method</h2>
<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>
</body>
</html>
ECMAScript 5 (2009) tillåter egenskapsåtkomst [ ] på strängar:
let text = "HELLO WORLD";
let char = text[0];
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Property access on strings:</p>
<p>The first character in the string is:</p>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>
Tillgång till egendom kan vara lite oförutsägbar:
Det får strängar att se ut som arrayer (men det är de inte)
Om inget tecken hittas returnerar [ ] odefinierat, medan charAt() returnerar en tom sträng.
Den är endast läsbar. str[0]="A" ger inget fel (men fungerar inte!)
let text = "HELLO WORLD";
text[0] = "A"; // Gives no error, but does not work
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Property acces on strings are read only:</p>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
text[0] = "A"; // Does not work
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Om du vill arbeta med en sträng som en array kan du konvertera den till en array.
En sträng kan konverteras till en array med metoden split()
:
text.split(",") // Split on commas
text.split(" ") // Split on spaces
text.split("|") // Split on pipe
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Display the first array element, after a string split:</p>
<p id="demo"></p>
<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>
</body>
</html>
Om separatorn utelämnas kommer den returnerade arrayen att innehålla hela strängen i index [0].
Om avgränsaren är "", kommer den returnerade arrayen att vara en array av singel tecken:
text.split("")
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<h2>The split().Method</h2>
<p id="demo"></p>
<script>
let text = "Hello";
const myArr = text.split("");
text = "";
for (let i = 0; i < myArr.length; i++) {
text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
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.