micro:bit JavaScript Blocks Editor: String interpolation

DFRobot Nov 23 2017 1158

serial.writeLine(`This string should not be changed`);

let placeholderValue = "World";
serial.writeLine(`Hello ${placeholderValue}!`);

serial.writeLine("Hello ${placeholderValue}!");
serial.writeLine('Hello ${placeholderValue}!');

serial.writeLine(`Sum of two values: ${10 + 20}`);

function test() {
    return "test";
}
 
serial.writeLine(`Output of function: ${test()}`);

serial.writeLine(`This string should not be changed`);
 
let placeholderValue = "World";
serial.writeLine(`Hello ${placeholderValue}!`);
 
serial.writeLine("Hello ${placeholderValue}!");
serial.writeLine('Hello ${placeholderValue}!');
 
serial.writeLine(`Sum of two values: ${10 + 20}`);
 
function test() {
    return "test";
}
 
serial.writeLine(`Output of function: ${test()}`);

micro:bit JavaScript Blocks Editor: String interpolation

The objective of this microbit tutorial is to explain how to use string interpolation on the micro:bit board, using the JavaScript Blocks Editor.

Introduction

In JavaScript, which we will be using to program our micro:bit board, we perform string interpolation by enclosing our string in grave accents (“) and using ${expression} as placeholder [2].

Note that if we don’t specify any placeholder, we will simply get the original string.

The code

In order for testing our code, we will be printing some content to the serial port. Please consult this introductory post for checking how to perform all the needed configurations to print content to the serial port from the micro:bit board.

So, our first test will consist on simply printing a string enclosed in the grave accents, without any placeholder. As stated before, the original string should be printed without any change.

Moving on, we will now perform some string interpolation. So first, we will define a variable that will hold the content we want to put in the placeholder we will use on the string.

Next, we will write our string with the placeholder receiving the previously defined variable.

Note that if we use double quotes or single quotes to enclose the exact same string, there will be no replacement and what was previously a placeholder will now be interpreted as a part of the string.

Note that we can use other expressions on our placeholder. For example, we can sum two numbers and the resulting value will be placed in the final string.

Just as a final example, other thing that we can do is calling a function on our placeholder, and the value returned will be used. To test it, we will define a very simple function that returns a string and use it in a placeholder.

You can check the full source code below.

Simulating the code

As usual, you can simply test the code on the simulation environment of the JavaScript Blocks Editor. You can check below at figure 1 the expected result.

On the opposite, when we used single and double quotes for the same string with the placeholder, there was no replacement. Note that the ribbon with the 2 value simply indicates that the same string was printed twice.

Finally, when using a function inside the placeholder, the returning value of that function was also replaced in the string.

Testing the code on the board

After the upload is finished, you need to open a software that is able to establish a serial connection with the micro:bit. I will be using Putty, but you can user other one. In the past, I’ve been using the Arduino IDE serial monitor, which works pretty well.

In the case of Putty, after downloading the software and double click it, you should configure the connection, as shown in figure 2.

Finally, you need to set the connection speed to 115200 and click the open button on the bottom.

Figure 2 – Configuring Putty to establish a serial connection with the micro:bit board.

Figure 3 – Output of the program, running on the micro:bit.

Related Blog Post:

Microbit Tutorials

Microbit Projects