Katemonkey (In Most Places)

Learning JavaScript, Day 11 – Strings and Template Strings

Man, am I tired. Just absolutely dragging today. Eventually I'll go up and have a nap, but I'm dyeing my hair, so I have a towel and a shower cap on my head, and if I take a nap, I'll end up covering everything in a mix of Manic Panic's Mermaid and Rockabilly Blue.

My face. My hands. My wall. My duvet. My pillows. My baby Blåhaj. My giant squid. All blue and teal all over the place.

So, instead, I try to stay awake and learn about JavaScript strings.

JavaScript Strings

I know what strings are, I've used them, seen them in action, I've got this.

Using Quotes

Occasionally I need to remember that if I'm going to put quotes in my string, to make sure they don't mix up with whatever I'm using to indicate the string, like:

let singer = "David Byrne";
let song = '"Life During Wartime"';
let thisTrack = singer + " is singing " + song;

Using Quotes With Template Strings

Template strings are cool, but I am totally unsure how I can show them off, what with Markdown using backticks to indicate code.

let text = `He's often singing "Life During Wartime".`

Oh there we go. Heck yeah.

String Length

length is a good property, but I'm not 100% sure when I'll use it, unless it's a way for me to go "you wrote how much in reply to my smartass comment? No. I'm not reading that."

Escape Characters

And I've seen escape characters so many times - they kept on showing up in the HTML in the early days when people weren't writing good JavaScript. You'd be reading along and suddenly there'd be, like, "Changed my hairstyles so many times now don't know what I look like".

But they come in really handy for when you're a stickler for good punctuation.

let singer = "David Byrne";
let song = "Life During Wartime";
let album = "Stop Making Sense";
let thisTrack = singer + " is singing \"" + 
song + "\" from \"" + album + "\".";

I also like that they show off the other escape sequences, some of which I will forever and ever love because they come in so handy when you're doing find/replace on things.

Oh no, I have to take this giant chunk of text and replace every new line with </p><p> in order for it to be properly formatted?

Find \n\n, replace with </p>\n<p>. Mmmmm.

(One of these days, I also need to write about how I keep on hand-coding GraphViz to produce family trees in my Sims 4 games. Because I use \n to put the names on two lines so they look better in the chart. But that's for another day, and you really don't want to know how in-depth I go. It's not right.

I mean, it's not right because I still can't get GraphViz to do exactly what I need it to do and some of the lines are confusing, but it's also not right in the "you spend how long doing this?" way.)

Breaking Long Lines

I like that I can break up strings by using +, but I'm not going to lie, it just looks clunky as all hell.

let singer = "David Byrne";
let song = "Life During Wartime";
let album = "Stop Making Sense" + 
" (Special Edition)";
let thisTrack = singer + " is singing \"" + 
song + "\" from \"" + album + "\".";

I mean, in this code, thisTrack is already ridiculous, what with all the escape backslashes and addition, adding another one to album is just looking silly.

Breaking Long Lines With Template Strings

But Template Strings do make it easier, I have to say.

let singer = "David Byrne";
let song = "Life During Wartime";
let album = `Stop Making Sense 
(Special Edition)`;
let thisTrack = singer + " is singing \"" + 
song + "\" from \"" + album + "\".";

Yeah, if I had a giant string of text, I'd use template strings, I think.

Strings As Objects

W3Schools really likes going through a particular bit of code, showing you how it's written, letting you try it for yourself, and then going "Don't actually ever do this."

Don't create string objects. Sure. Absolutely no problem. But why did you show me how to?

JavaScript String Templates

I was thinking about stopping with just the basics, but then I saw the first bit of this section.

Screenshot of the String Templates starter in W3Schools, where it has three phrases in large text: String Templates, Template Strings, and Template Literals, and then, underneath, in smaller text, it says Beloved child has many names.

BELOVED CHILD HAS MANY NAMES.

I was unaware we were choosing favourites, but, yeah, okay, string templates are the chosen ones, got it.

It goes through what you can use template strings for – using single and double quotes and using them for breaking up a string across multiple lines...

Variables In Strings

Then it points out that with a template string, you can pop in variables, and...

let singer = "David Byrne";
let song = "Life During Wartime";
let album = "Stop Making Sense (Special Edition)";
let thisTrack = `${singer} is singing 
"${song}" from "${album}".`;

That is so much nicer than all those additions I was making. And if singer, song, and album are arrays, then I could have it go through them in order. Nice.

Hmm, let me try that.

const band = [
	"Talking Heads",
	"Devo",
	"Oingo Boingo",
	"X"];
const song = [
	"Life During Wartime",
	"Through Being Cool",
	"No One Lives Forever",
	"I Must Not Think Bad Thoughts"];
let track = 0;
let thisTrack = "";
while (track < 4) {
	thisTrack += `${band}[track] is singing "${song}[track]".<br>`;
	track++
}

Okay, that doesn't work.

Talking Heads,Devo,Oingo Boingo,X[track] is singing 
"Life During Wartime,Through Being Cool,No One Lives 
Forever,I Must Not Think Bad Thoughts[track]".
Talking Heads,Devo,Oingo Boingo,X[track] is singing 
"Life During Wartime,Through Being Cool,No One Lives 
Forever,I Must Not Think Bad Thoughts[track]".
Talking Heads,Devo,Oingo Boingo,X[track] is singing 
"Life During Wartime,Through Being Cool,No One Lives 
Forever,I Must Not Think Bad Thoughts[track]".
Talking Heads,Devo,Oingo Boingo,X[track] is singing 
"Life During Wartime,Through Being Cool,No One Lives 
Forever,I Must Not Think Bad Thoughts[track]".

let me try it with:

thisTrack += band[track] + " is singing \"" + 
song[track] + "\".<br>" ;

Yesssssss.

Talking Heads is singing "Life During Wartime".
Devo is singing "Through Being Cool".
Oingo Boingo is singing "No One Lives Forever".
X is singing "I Must Not Think Bad Thoughts".

I'm sure there's a way to have ${variable} work with an array. It'll probably be later.

Expressions In Strings

They also show that you can put expressions into string templates, which will let you do maths in your code, and their example taught me something else.

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

See, I got it right up to .toFixed(2). What I didn't know is that makes the number go to two decimal points, something that comes in very handy when working out prices.

Oh, hey, this would be great for my weather code too.

let cTemp = 13
let temp = `Today's temperature is 
${((cTemp * 1.8) + 32).toFixed(1)} F 
or ${cTemp} C.`;

Nice.

HTML Templates In Strings

Oh, hey, their example shows me how I can get part of my playlist to work.

let band = [
	"Talking Heads",
	"Devo",
	"Oingo Boingo",
	"X"];
let thisTrack = `<h2>Now Playing:</h2><ul>`;
for (const x of band) {
	thisTrack += `<li>${x}</li>`;
}

It only works with one array, but that's progress. I can get a list of all the bands, so now I just have to figure out how to get a list of all the bands with all the songs.

Day 11 — Results

I'm stopping there just because this has been a lot of me figuring out how to do things and my brain is spinning a bit. I'll tackle "String Methods", "String Search", and "String Reference" tomorrow.

Today's Sticker

A shiny metallic sticker where Hello Kitty is dressed as Indiana Jones, complete with fedora and whip.

I mention 80s' bands, I find an 80s' icon. Yes, Hello Kitty is Indiana Jones. Those Panini stickers had everything.

#kate learns javascript #kate learns web development #programming