DEV Community

Cover image for Introduction to JavaScript Strings
Naftali Murgor
Naftali Murgor

Posted on

Introduction to JavaScript Strings

#javascript #beginners #webdev #tutorial

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.

Top comments (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 K • • Edited

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 K • • Edited

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 •

Great insight!

Collapse
 
pengeszikra profile image
Peter Vivo • • Edited

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 •

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

blazestudios23 profile image

Simplifying GraphQL API Development with Code-First Approach, Nexus, and Prisma

Andrew Obrigewitsch -

shilleh profile image

How to Connect BMP-180 to Raspberry Pi Pico W

Shilleh -

squidex profile image

How to Handle 404 Errors in GraphQL

Squidex -

foxinfotech profile image

What Are Shared Components in Oracle APEX?

Vinish Kapoor -