Transform and Manipulate Strings
.length – counts the number of characters of a string including the space
- counts the number of characters of a string including the space
- sample use is to make sure a user enters the right number of characters, like for password or username
strings are treated as what are called objects, and different objects have different properties. A property of an object can be accessed by using a dot (.). A property is like a variable as it holds information. Like a variable, a property is dynamic and can change.
const passphrase = 'Open Sesame';
console.log(passphrase.length);A method is something that you can do with an object, an action that you can perform in a string for example. The () lets you know that these are methods, like commands that you can perform in a string.
toUpperCase()
toLowerCase()
/* Example */
const passphrase = 'I Have Spoken';
console.log(passphrase.toLowerCase());
const passphrase = 'I Have Spoken';
console.log(passphrase.toUpperCase());Capture Input
The prompt command gives you a way to collect information from a site user.
This is also a method as there’s ().
prompt(); returns a value.
prompt();
/* Example */
prompt('What is your name');
/*Another example*/
const name = prompt('What is your name');
alert(name);Combine Strings
String Concatenation – the process of combining two or more strings to create a bigger string.
'My favorite' + 'Movies'
'My favorite Movies'
/* Example */
const name = prompt("What is your name");
const message = "Hello " + name; /*notice that there's a space after "Hello ", to reflect the space in between the string and the prompt. */
console.log(message);
/*more example for spaces*/
const name = prompt("What is your name");
const message = "Hello " + name + ". Welcome to my music site." + " I'm so happy that you come by to visit, " + name + ". Feel free to come again to listen to more music.";
console.log(message);
/*another approach*/
const name = prompt("What is your name");
let message = "Hello " + name + ". Welcome to my music site."; /*note that we changed const to let to be able to manipulate the value of the variable "message" */
message += " I'm so happy that you come by to visit, ";
message += name;
message += ". Feel free to come again to listen to more music.";
console.log(message);Template Literals
JavaScript provides a more intuitive way to work with strings with a feature called “template literals.” Template literals not only make your code more usable and readable, but they also enhance how you work with strings.
The most significant difference is that you define template literals with backticks ``.
Then call the variable with ${name}
Interpolation – whatever’s inside the curly braces gets evaluated by the JavaScript engine and added to the string. (i.e. ${2 * 3} will perform the Math operation 2 * 3 and returns 6.
const message = `Hello, ${name}. Welcome to my music site. I'm happy that you came by to visit, ${name}. Please come again and listen to more music!`;
/*example*/
const name = prompt('What is your name?');
const message = `Hello, ${name}`;
console.log(message);
/* interpolation*/
const name = prompt('What is your name?');
const message = `Hello, ${name}. It's ${2*3} o'clock.`;
console.log(message);
/* it can also recognize new lines*/
const name = prompt('What is your name?');
const message = `Hello, ${name}. Welcome to my music site.
I'm so happy that you came by to visit, ${name}. Please come again and listen to more music.`;
console.log(message);Display the Value of a String on a Page
querySelector();
- a method of a built0in object the browser has called document. And it’s what’s going to let us interact with the browser to find the HTML elements we want to access.
const stringToShout = prompt("What do you want to shout?");
const shout = stringToShout.toUpperCase();
const shoutMessage = `<h2>The message to shout is: ${shout}!!</h2>`;
document.querySelector('main').innerHTML = shoutMessage;Practice
// 1. Declare variables and capture input.
let name = prompt("What is your name?");
let myAddress = prompt('Where do you live?');
let job = prompt('What is your job?');
let company = prompt('Where do you work?');
// 2. Combine the input with other words to create a story.
const myStory = `<p>${name} lives in ${myAddress}. ${name} works as a ${job} at ${company}.</p>`;
// 3. Display the story as a <p> inside the <main> element.
document.querySelector('main').innerHTML = myStory;