Learn JavaScript in Construct, part 10: Standard library

13

Index

Features on these Courses

Stats

7,648 visits, 18,229 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 26 Nov, 2021. Last updated 16 Dec, 2021

String methods

Previously we covered strings like "Hello world". In JavaScript, strings are also a special kind of object, and so have properties and methods you can call on them. For example "Hello".length is 5, as the string has 5 characters.

You may have noticed that arrays are also a special kind of object in JavaScript. In fact in JavaScript pretty much everything is an object! Here are some useful string methods that you can try out in the console.

// Try entering in to the browser console:

// toLowerCase() returns a new string with lower case
"Hello World".toLowerCase()	// "hello world"

// toUpperCase() returns a new string with upper case
"Hello World".toUpperCase();	// "HELLO WORLD"

// includes() returns a boolean indicating if a given
// string appears in the string it is called on
"Hello world".includes("world")	// true
"Hello world".includes("pizza")	// false

// startsWith() returns a boolean indicating if the
// string it is called on starts with a given string
"Hello world".startsWith("Hello")	// true
"Hello world".startsWith("Pizza")	// false

// endsWith() does the same but for the end of the string
"Hello world".endsWith("world")		// true
"Hello world".endsWith("pizza")		// false

// repeat() returns a new string which repeats the
// string it is called on a number of times
"😀".repeat(5)		// 😀😀😀😀😀

// split() returns an array of strings separated
// by a given character
"pizza,chocolate,burrito".split(",")
// returns an array:
// ["pizza", "chocolate", "burrito"]

Strings can also be converted to an array with one character per element using the spread operator .... The below example shows how the array can then be used to access the number of characters and a character at a specific index.

// A string with an emoji
let str = "Hi😀";

// Convert the string to an array
let arr = [...str];

// The array now has:
// [ "H", "i", "😀" ]

// Log details about the string from the array
console.log(`The array length is ${arr.length}`);
console.log(`The 3rd character is ${arr[2]}`);

You can also use a for-of loop to iterate the characters of the string directly.

// A string with an emoji
let str = "Hi😀";

// Use a for-of loop to repeat for each character
for (let ch of str)
{
	console.log(`String character: ${ch}`);
}

There's lots more you can do with strings in JavaScript. See the String MDN documentation for more.

  • 5 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • awesome details! thanks Ashley!

  • Construct its not about codes !!! its about an easy form to create a game by simple drag and drop events and actions !!! let these codes for professionals of AAA companies !!! Shame on you !!!!

    • Construct is built on JS and can be extended with addons written in JS. That has been true since the release of C3. But nobody is forcing any user to learn JS to make games or apps with C3. This series is for people who want to expand their knowledge. No C3 user needs to understand JS to make software, but many of us would like to better understand the underlying language and be able to write addons.

      If your complaint is that it took time and energy to write these tutorials, and that this takes time and energy away from improving C3, then I understand. I wish that it was possible to create behaviors using nothing but event sheet logic, and I would love to see more time and energy directed at that. But that doesn't make this tutorial series a bad thing. As a long-time game designer with a good grounding in basic programming, this series is quite valuable to me. If anything it inspires me to push Construct further using JS.

  • One question that emoji with two characters isn't it because od this :D .???

  • Really good job...