JavaScript Scratches

Strings 01

A lot of what you will work with in JavaScript are strings - text strung together to form words, titles, names, dictionaries, etc.

In order to do all the various things that can be done with strings, JavaScript has quite a collection of commands and 'methods' available.

Strings are wrapped in quotes. Either:

double ("string")
single ('string')
backticks (`string`)

All strings are immutable - they can't be changed. Only replaced.

This may sound like an oxymoron, since "immutable" means "can't be changed". Say what?

A variable name occupies a certain memory location, and the value it contains occupies a different memory location (namespace).

A variable points to the memory location of the value associated with it. So if you change the value of a variable, it creates that value in a new memory location.

String methods return new strings - they do not modify the original string.

let myVar = "This string is frayed.";
Sprint (myVar<br/>);
myVar = "This string is afraid".;
Sprint (myVar<br/>);

'Here' documents

If you've done programming in other languages, you may have about these special nuggets.

A here document (aka 'template string') is a block of text you want to print to the display.

Now that sounds kind of redundant, because wouldn't you just the language's 'print' command to do that?

In JavaScript that would be 'document.write'.

For 1 line of text that would make sense, but we're talking about a block of text - several lines of it, possibly hundreds of lines.

We don't want to have a 'write.document' command for every line we want to display, so we use a here document.

See my version of 'print'

In JavaScript we use a back-tick (`) to quote the lines of text like this:

Here's the magik:

<script>
myVar=`<h2>This</h2>is a <i>number of lines</i>
of <b>text</b> we're
going to display as a 'here' document.</p>`;
Sprint(myVar);
</script>

Now that's cool. And saves a lot of typing.

This becomes very useful
when we have to output variables.

<script>
myNumber=42;
myColor="purple";
myMusic="jazz";
myText=`<p>My favorite number is ${myNumber} and I like to listen to ${myMusic}.<br/>
Oh, and I'm rather fond of deep <span style="color:darkviolet;">${myColor}</span>.</p>`;
Sprint(myText);
</script>

Strings - Length