Basic string methods in JavaScript and how to use methods?

What is a string?

A JavaScript string is a text that can be inside double (“text”) quotes or single (‘text’) quotes. String indexes are zero-based- The first character is (0) zero, the second is (1), and so on. Example:-

let carName1 = "Volvo XC60";
let carName2 = 'Volvo XC60';

String Property and methods

In JavaScript, strings like” Mohammad” are  generally considered primitive values, which do n’t have  styles or  parcels. However, when you access a method or property on a string, JavaScript temporarily converts it into a String object, allowing you to use various built-in methods. We can defined string in 5 categories:

• Basic String Methods
• Search & Check Methods
• Substring & Extract Methods
• Replace & Modify Methods
• Convert & Transform Methods

Today, we learn about Basic String Methods in JavaScript and How to use this methods in your code. Let’s dive into learning.

Basic String Methods

1. string[index] – Return an indexed character from a string.

Example:

 const my_string = "Hello World";
 console.log(my_string[3])
 // output: "l"

Key Points:

• The string[index] – index is required.
• It return indexed single-string character
• It give an Error when index is not specified or provide.

2. at() – Returns an indexed character from a string.

Example:

 const my_string = "Hello World";
 console.log(my_string.at(8))
 // output: "r"

Key Points:

• The at() method returns the same as string[index].
• The at(index) – index is optional. The default index is 0.
• It return indexed single-string character
• Return undefined if the index is out of range.
• String at() is supported in all browsers since March 2022.

3. charAt()– Returns the character at a specified index (position).

Example:

 const my_string = "Hello World";
 console.log(my_string.charAt(6))
 // output: "W"

Key Points:

• The charAt() method returns the same as string.at().
• The charAt(index) – index is optional. The default index is 0.
• It return indexed single-string character
• Return an empty string ("") if the index is out of range.
• charAt() is an ECMAScript1 (JavaScript 1997) feature.
• It is supported in all browsers.

4. charCodeAt()– Returns the Unicode of the character at a specified index.

Example:

 const myString = "Hello World";
 console.log(myString.charCodeAt(3))
 // output: 108

Key Points:

• charCodeAt() returns a number between 0 and 65535.
• The charCodeAt(index) – index is optional. The default index is 0.
• It converted the indexed string to a number and returned the converted number.
• Return NaN if the index is out of range or invalid.
• charCodeAt() is an ECMAScript1 (JavaScript 1997) feature.
• It is supported in all browsers.

5. codePointAt() – Returns the Unicode value at an index (position) in a string

Example:

 const myString = "Hello World";
 console.log(myString.codePointAt(4))
 // output: 111

Key Points:

• codePointAt() is UTF-16 and codePointAt() is Unicode.
• The codePointAt(index) – index is optional. The default index is 0.
• It converted the indexed string to a number and returned the converted number.
• Return undefined if the index is out of range or invalid.
• codePointAt() is an ECMAScript6 (ES6) feature.

6. concat()– Returns two or more joined strings

Example:

 const string1 = "Hello";
 const string2 = "World";
 const concatedString = string1.concat(" ", string2))
 console.log(concatedString)

 // output: "Hello World"

Key Points:

• The concat() method does not change the existing string.
• The concat() method returns a new string.
• The concat(string1, string2, …., stringX) – the strings required for strings to be joined.
• concat() is an ECMAScript1 (JavaScript 1997) feature. 
• It is supported in all browsers.

7. fromCharCode()– method converts Unicode values to characters.

Example:

let text = String.fromCharCode(72, 69, 76, 76, 79);
console.log(text);

// Output- HELLO

Key Points:

• String.formCharCode() returns a string representing the unicode characters.
• The String.formCharCode() is a static method of the String object. 
• The syntax is always String.formCharCode(). 
• You cannot use it, like this: myString.formCharCode().
• The String.formCharCode(n1, n2, …. nX) –
  • At least One or more Unicode values required for converting.
• String.formCharCode() is an ECMAScript1 (JavaScript 1997) feature.
• String.formCharCode() supported in all browsers.

8. length– Property return length of string.

Example:

let text = "Hello World!";
let length = text.length;

// Output- 11

Key Points:

• length Property return 0 if a string is empty.
• length returns a Number.
• length is an ECMAScript1 (JavaScript 1997) feature.
• length is supported in All browsers.

9. toLowerCase() – method converts a string to lowercase string.

let text = "Hello World!";
let result = text.toLowerCase();
console.log(result);

// Output: "hello world"

Key Points:

• toLowerCase() method don’t change the main string.
• toLowerCase() returns a new string.
• toLowerCase() is an ECMAScript1 (JavaScript 1997) feature.
• toLowerCase() is supported in All browsers.

10. toUpperCase() – method converts a string to uppercase string.

let text = "Hello World!";
let result = text.toUpperCase();
console.log(result);

// Output: "HELLO WORLD"

Key Points:

• toUpperCase() method don’t change the main string.
• toUpperCase() returns a new string.
• toUpperCase() is an ECMAScript1 (JavaScript 1997) feature.
• toUpperCase() is supported in All browsers.

11. trim() – method removes whitespace from both sides of a string.

let text = "       Hello World!        ";
console.log(text.trim());

// Output: "Hello World"

Key Points:

• trim() method don’t change the main string.
• trim() returns a new string.
• trim() is an ECMAScript5 (ES5) feature.
• trim() is supported in all browsers.

12. repeat() – method returns a string with a number of copies of a string.

let text = "Hello World!";
let result = text.repeat(2);

// Output: 'Hello World!Hello World!'

Key Points:

• repeat() method don’t change the main string.
• repeat() returns a new string.
• The repeat(count/number) – count number is required to repeat string.
• repeat() is an ECMAScript5 (ES6) feature.
• repeat() is supported in all browsers without internet explorer.

Final Words

These 12 string methods are some of the most commonly used tools in JavaScript — whether you’re slicing, searching, trimming, or transforming strings, they’ll be your go-to solutions in real-world projects.

If you’re just getting started, mastering these methods is a huge step forward toward writing cleaner, smarter, and more efficient code.

💬 Still confused about any of the methods above?
Drop a comment below, and I’d be happy to explain it in a simpler way — we learn better when we learn together!

For more information please visit W3School