GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Resources
  • HTML
  • CSS
  • JavaScript
  • Performance
  • Accessibility
  • Identity
  • Learn HTML
  • Learn CSS
  • Learn JavaScript
  • Learn AI
  • Learn Performance
  • Learn Accessibility
  • AI and the web

This view

  • Original page
  • New address

GeezerVison is showing web.dev — Strings | web.dev

Modern Web Guidance is now stable! Upgrade your coding agents with expert-vetted web development best practices. Read the announcement.

Strings Stay organized with collections Save and categorize content based on your preferences.

Any set of characters—letters, numbers, symbols, and so on—between a set of either double quotation marks ("), single quotation marks ('), or backticks (`) is a string primitive. You've already seen a few examples of strings in this course: the instances of console.log in the previous module contained string primitives.

console.log( "Hello, World." );
> Hello, World.

"Hello, World." is a string primitive. You get the same result with single quotes or backticks:

console.log( 'Hello, World.' );
> Hello, World.

console.log(`Hello, World.`);
> Hello, World.

A series of characters enclosed in quotation marks is called a string literal. Double and single quotes behave in the same way, and one can contain the other as a character in the string itself:

console.log( "I'm a string." );
> I'm a string.

console.log( '"A string," I said.' );
> "A string," I said.

An instance of the same enclosing character within the string "closes" the string, likely causing errors:

console.log( '"I'm a string," I said.' );
> Uncaught SyntaxError: missing ) after argument list

To avoid this, escape the character using a backslash (\):

console.log( '"I\'m a string," I said.' );
> "I'm a string," I said.

String object

When called as a function, the String object coerces a specified value to a string literal.

let myString = String( 10 );

myString
> "10"

typeof myString
> string

As detailed in prototypal inheritance, you'll rarely need to use the String object as a constructor. It creates a string object containing the specified value, alongside the methods and properties already afforded by the String object, instead of a string literal.

let stringObj = new String( "My new string." );

typeof stringObj
> object

stringObj
> String { "My new string." }

Concatenation

When used in the context of strings instead of numbers, a single plus sign (+) acts as a concatenation operator, combining multiple string values into a single string:

console.log( "My" + " string." );
> My string.

String literals and template literals

Single quotes, double quotes, and backticks can be used interchangeably for creating string primitives. However, you can also use backticks to specify template literals (sometimes called "template strings"). Unlike the string literals created by single or double quotes, template literals allow for multi-line strings and string interpolation.

const myString = "This
is a string.";
> Uncaught SyntaxError: "" string literal contains an unescaped line break

const myString = `This
is a string.`;

console.log( myString );

> This
is a string.

Template literals can contain placeholder expressions marked by a dollar sign and curly braces (${}). These placeholders are "interpolated" by default, meaning that the result of the expression replaces the placeholder in the final string.

console.log( "The result is " + ( 2 + 4 ) + "." );
> The result is 6.
console.log( `The result is ${ 2 + 4 }.` );
> The result is 6.

A template literal can be passed to a custom function to create a tagged template, a function call that uses a single template literal as a set of arguments and lets its placeholders populate based on author-defined logic.

The first argument of a tag function contains an array of string values, and the remaining arguments define the placeholders. This array of string values is created by "splitting" the template literal at each placeholder it contains. The first element in the array contains any characters up to the first placeholder, the second element contains any characters between the first and second placeholders, and so on. Each placeholder is passed to the tag function as a standalone value with an associated placeholder.

const myNoun = "template literal";

function myTagFunction( myStrings, myPlaceholder ) {
    const myInitialString = myStrings[ 0 ];
    console.log( `${ myInitialString }modified ${ myPlaceholder }.` );
}

myTagFunction`I'm a ${ myNoun }.`;
> "I'm a modified template literal."

Check your understanding

Which character is used to escape characters?

A backslash (∖)
A double quote (")
A forward slash (/)

Which character is used for concatenation?

+
&
.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-03-31 UTC.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.