Mastering JavaScript Strings | TechWithTwin

JavaScript strings explained by TechWithTwin

Table of Contents:

1. Introduction to JavaScript Strings.
2. String Properties.
3. String Creation and Concatenation.
4. Common String Methods.
5. String Searching and Matching.
6. Splitting and Joining Strings.
7. Advanced String Techniques.
8. Performance Considerations.
9. Real-World Examples and Use Cases.
10. Common Mistakes.
11. Conclusion

1. Introduction to JavaScript Strings

In JavaScript, a string is a sequence of characters that represent text. It’s one of the primitive data types of JavaScript.

JavaScript strings are enclosed by:

1. Single quotes (‘text’).
2. Double quotes (“text”).
3. Backticks — or template literals (`text`) — allow embedded expressions and multi-line strings.

Either is okay to use, and now it’s a matter of personal preference.

Examples of strings;

let myName = 'TechWithTwin';
let greeting = "Hello, world!";

You can store a number in a string and later on convert it, but this is not advisable; only store text characters as strings, unless it’s a must, depending on your use case.

Primitive vs. String Object

let primitive = "hello";
let objectStr = new String("hello");
console.log(typeof primitive); // "string"
console.log(typeof objectStr); // "object"

2. String Properties

• `length`: returns the number of characters in a string.

"TechWithTwin".length; //5

• Immutability: Strings can’t be changed after creation.

3. String Creation and Concatenation

To create a string, you can declare a variable and assign it a string, i.e

let name = 'TechWithTwin';

You can also create a string using the string constructor using the new keyword, but now the name is an instance of the String class, i.e

let name = new String('TechWithTwin') // Not recommended use the first way

Concatenation:

Concatenation means adding two strings together. You can achieve this using two methods:

• Using the “+” sign

let fullName = 'TechWith' + 'Twin'; // TechWithTwin
let introText = 'Hello' + ' ' + 'World'; // Hello World

Notice how I added a space character on the second line

• Using the backticks or template literals

let name = 'TechWithTwin';
let message = 'Hello, ${name}';

Beginner Tip: Backticks are special quotes `` that let you insert values directly into a string using ${}. Inside the curly braces, you can use a variable or even a calculation.

4. Common String Methods

A string in JavaScript is more than just text — it’s an object created from the String class behind the scenes.

That means it has built-in functions, called methods, that you can use to do things like change case, trim spaces, or find characters.

These methods are part of the String class; every string you create automatically has access to them.

Get TechWithTwin’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

They include:

• CharAt(index), charCodeAt(index), at(index)
• toUpperCase(), toLowerCase()
• trim(), trimStart(), trimEnd()
• slice(start,end), substring(start,end)
• includes(substring), indexOf(), lastIndexOf()
• StartsWith(),endsWith()

5. String Searching and Matching.

• Regular expressions with search():

"hello world".search(/world/); // 6 

• Matching:

"abc123".match(/\d+/); // ["123"]

• replace() and replaceAll() :

"a-b-c".replace(/-/g, ":"); // "a:b:c"

6. Splitting and Joining Strings

Another helpful method for strings is the split(delimiter)and join(delimiter)

• split(delimiter) — Splits a string into an array on the specified delimiter.

'a,b,c'.split(","); // ['a','b','c']

• join(delimiter) — Joins a specified array back to a string. It is the reverse of the split.

['a','b','c'].join('-'); // 'a-b-c'

7. Advanced String Techniques

• Unicode characters:

"\u2764"; // "❤"

• Escaping — escape a special character.

"He said, \"hello\"";

• Normalization:

"e\u0301".normalize() === "é"; //true

• Emojis are surrogate pairs: Use Array.from() to handle properly.

8. Performance Considerations

When working with strings in large amounts or inside loops, efficiency matters:

• Avoid + in loops:

let result = "";
for (let s of array) {
  result += s;
}

This is inefficient because each += creates a new string, copying all the previous content.

• Prefer join() for large concatenations:

let result = array.join("")

This approach builds the final string in one step and is more memory-efficient.

9. Real-World Examples and Use Cases

• Parsing query strings:

"name=alice&age=25".split("&").map(pair => pair.split("="));

• Input validation:

/^\w+@[a-z]+\.[a-z]+$/.test(email);

• Dynamic content formatting:

`Welcome, ${user.name}!`

10. Common Mistakes and Gotchas

• Confusing == and === .
• Misusing slice() , substring() , and substr() .
• Ignoring Unicode and emoji issues

12. Conclusion

That’s it from me, guys, happy coding.

Follow TechWithTwin for more content:

TechWithTwin | Top Software Consultant in Kenya

https://x.com/techwithtwin

https://instagram.com/techwithtwin