JavaScript String Methods and Manipulation

JavaScript String Methods and Manipulation

Powerful Built-in Methods for Text Operations

Author
Nguyen Bao Huy
10:03:00 21/02/2026
4 min read
0 comments

String length

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

Result:

javascript
JavaScript Strings
The length Property
The length of the string is:

26

String charAt()

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

Result:

javascript
JavaScript String
The charAt() Method
The charAt() method returns the character at a given position in a string:

H

String at()

html
<!DOCTYPE html>
<html>
	<body>
	
		<h1>JavaScript Strings</h1>
		<h2>The at() Method</h2>
		
		<p>The at() method returns an indexed element from a string:</p>
		
		<p id="demo"></p>
		
		<script>
			const name = "W3Schools";
			let letter = name.at(2);
			
			document.getElementById("demo").innerHTML = letter;
		</script>
	
	</body>
</html>

Result:

javascript
JavaScript Strings
The at() Method
The at() method returns an indexed element from a string:

S

String charcodeAt()

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

Result:

javascript
JavaScript String
The charCodeAt() Method
The charCodeAt() method returns the unicode of the character at a given position in a string:

72

JavaScript codePointAt()

Get code point value at the first position in a string:

javascript
let text = "HELLO WORLD";
let code = text.codePointAt(0);

JavaScript String concat()

concat() joins two or more strings:

javascript
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

The concat() method can be used instead of the plus operator. These two lines do the same:

javascript
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");
All string methods return a new string. They don't modify the original string. Formally said: Strings are immutable: Strings cannot be changed, only replaced.

Extracting String Parts

There are 3 methods for extracting a part of a string:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript String slice()

slice() extracts a part of a string and returns the extracted part in a new string.

The method takes 2 parameters: start position, and end position (end not included).

Example: Slice out a portion of a string from position 7 to position 13.

javascript
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);
JavaScript counts positions from zero. First position is 0, Second position is 1

Example: If you omit the second parameter, the method will slice out the rest of the string.

javascript
let text = "Apple, Banana, Kiwi";
let part = text.slice(7);

If a parameter is negative, the position is counted from the end of the string:

javascript
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);

This example slices out a portion of a string from position -12 to position -6:

javascript
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6);

JavaScript String substring()

substring() is similar to slice(). The difference is that start and end values less than 0 are treated as 0 in substring().

javascript
let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

If you omit the second parameter, substring() will slice out the rest of the string.

JavaScript String substr()

substr() is similar to slice(). The difference is that the second parameter specifies the length of the extracted part.

The substr() method is removed (deprecated) in the latest JavaScript standard. Use substring() or slice() instead.
javascript
let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

If you omit the second parameter, substr() will slice out the rest of the string.

javascript
let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

If the first parameter is negative, the position counts from the end of the string.

javascript
let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

Converting to Upper and Lower Case

A string is converted to upper case with toUpperCase():

A string is converted to lower case with toLowerCase():

JavaScript String toUpperCase()

javascript
let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript String toLowerCase()

javascript
let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

JavaScript String isWellFormed()

The isWellFormed() method returns true if a string is well formed.

Otherwise it returns false. A string is not well formed if it contains lone surrogates.

javascript
let text = "Hello world!";
let result = text.isWellFormed();
javascript
let text = "Hello World \uD800";
let result = text.isWellFormed();

JavaScript String toWellFormed()

The String method toWellFormed() returns a new string where all "lone surrogates" are replaced with the Unicode replacement character (U+FFFD).

javascript
let text = "Hello World \uD800";
let result = text.toWellFormed();

JavaScript String trim()

The trim() method removes whitespace from both sides of a string:

javascript
let text1 = "      Hello World!      ";
let text2 = text1.trim();

JavaScript String trimStart()

ECMAScript 2019 added the String method trimStart() to JavaScript. The trimStart() method works like trim(), but removes whitespace only from the start of a string.

javascript
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

JavaScript String trimEnd()

ECMAScript 2019 added the string method trimEnd() to JavaScript. The trimEnd() method works like trim(), but removes whitespace only from the end of a string.

javascript
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

JavaScript String Padding

ECMAScript 2017 added two new string methods to JavaScript: padStart() and padEnd() to support padding at the beginning and at the end of a string.

JavaScript String padStart()

The padStart() method pads a string from the start. It pads a string with another string (multiple times) until it reaches a given length.

Pad a string with "0" until it reaches the length 4:

javascript
let text = "5";
let padded = text.padStart(4,"0");

Pad a string with "x" until it reaches the length 4:

javascript
let text = "5";
let padded = text.padStart(4,"x");
The padStart() method is a string method. To pad a number, convert the number to a string first. See the example below.
javascript
let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");

JavaScript String padEnd()

The padEnd() method pads a string from the end. It pads a string with another string (multiple times) until it reaches a given length.

javascript
let text = "5";
let padded = text.padEnd(4,"0");
javascript
let text = "5";
let padded = text.padEnd(4,"0");
The padEnd() method is a string method. To pad a number, convert the number to a string first. See the example below.
javascript
let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");

JavaScript String repeat()

The repeat() method returns a string with a number of copies of a string. The repeat() method returns a new string. The repeat() method does not change the original string.

javascript
let text = "Hello world!";
let result = text.repeat(2);
javascript
let text = "Hello world!";
let result = text.repeat(4);

JavaScript Strings and Text Processing
Previous Lesson

JavaScript Strings and Text Processing

Next Lesson

JavaScript String Search and Pattern Matching

JavaScript String Search and Pattern Matching
Author avatar

Nguyen Bao Huy

Lead Fullstack & AI Solutions Engineer

Specializing in Next.js App Router, React 19, TypeScript, and modern design systems. Passionate about creating seamless user experiences.

Discussion

0

No comments yet

Be the first to share your thoughts, question a concept, or provide additional tips!

Leave a Reply

Share your insights, questions, or solutions with the developer community.

Your avatar
0 / 500 characters