DEV Community

Cover image for Introduction to JavaScript Strings
Naftali Murgor
Naftali Murgor

Posted on

Introduction to JavaScript Strings

Introduction

JavaScript Strings provide a way of representing and handling characters.

JavaScript Strings

A JavaScript string is a set of character(s) written inside quotes.

// with single quote
let emptyString = '' // an empty string
let name = 'Elon Musk'

// with double quotes
let project = "SpaceX"
Enter fullscreen mode Exit fullscreen mode

Declaring a String in JavaScript does not restrict usage of single '' and double quotes ""

Acess character

String objects provide a useful method for accessing a character in a string

let catName = 'Anita'
console.log(catName.charAt(0)) // prints 'A', character at a position 0
Enter fullscreen mode Exit fullscreen mode

Strings behave like Array-like objects, so above can be:

let catName = 'Anita'
console.log(catName[0])// prints 'A'
// looping throug each character
for (let i = 0; i < catName.length; i ++) {
  console.log(catName[i]) // A, n, i, t, a
}
Enter fullscreen mode Exit fullscreen mode

Get length of a JavaScript String

const THREAD_NAME = 'Moonspiracy'
console.log(THREAD_NAME.length) // prints number of characters// 11
Enter fullscreen mode Exit fullscreen mode

Summary

JavaScript Strings provide a way of presenting strings using double or single quotes. Both syntaxes are valid and usage is based on project style guide and preferences.

Discussion (9)

Collapse
lukeshiru profile image
Luke Shiru

Adding to the article, you can also use " besides ' to define a string:

const obiWan = "hello there";
Enter fullscreen mode Exit fullscreen mode

And to loop over the characters in a string you have other options such as...

const greeting = "hello";

// Using for..of
for (const character of greeting) {
    console.log(character);
}

// Using Array.prototype.forEach (after turning it into an array with Array.from)
Array.from(greeting).forEach(character => console.log(character));

// Same with spread:
[...greeting].forEach(character => console.log(character));

// Same with Array.prototype.split
greeting.split("").forEach(character => console.log(character));
Enter fullscreen mode Exit fullscreen mode

And if you wonder which one is faster, here you have a perf comparison (you might think is the for..of ... and you would be wrong).

Cheers!

Collapse
romeerez profile image
Roman Kushyn • Edited on

There is something interesting about turning a string to array, would you like a quiz?

// all are true:
typeof x == 'string'
x.length == 2;
[...x].length == 1
Enter fullscreen mode Exit fullscreen mode

What was the x? :)

Collapse
lukeshiru profile image
Luke Shiru

IDK if this is for me, but I take it: x was a UTF character made of others, like emojis with skin colors. You can use Intl.Segmenter to avoid this issue.

Thread Thread
romeerez profile image
Roman Kushyn • Edited on

Was for you, okay I'll mention next time, you're right!

x = "💩"
Enter fullscreen mode Exit fullscreen mode

thanks for the link - I never heard of Segmenter

Collapse
naftalimurgor profile image
Naftali Murgor Author

Great insight!

Collapse
pengeszikra profile image
Peter Vivo • Edited on

The new .at also works in String ... but not in IE

'Elon Musk'.at(-1) // k

'Elon Musk'.slice(-4) // Musk
Enter fullscreen mode Exit fullscreen mode

Maybe you can write about regexp which is great tool of string handling.

Collapse
naftalimurgor profile image
Naftali Murgor Author

Great insight! Never occured to me. I think IE is the "lost sheep" of web browsers haha

Collapse
naftalimurgor profile image
Naftali Murgor Author

Learn more about ES6 Template Literals at naftalimurgor.netlify.app/es6-temp...