1.3 Strings¶
Adding one string to another¶
let's display the word "Hello" in the console.
console.log("Hello");
What if, we want to display "Hello Nawras". Nawras is my name, you can replace it with your name. we can write the following code:
console.log("Hello Nawras");
Let's add another sentence below "Welcome to our website, Nawras":
console.log("Hello Nawras");
console.log("Welcome to our website, Nawras");
Let's display the same sentences, but we want to greet Ali this time:
console.log("Hello Ali");
console.log("Welcome to our website, Ali");
You can see the name in the greeting message changes according to the person to be greeted. Let's create the variable name
:
var name = "Ali";
How to add the name to the greeting message? We can use the +
operator. Let's do it:
var name = "Ali";
console.log("Hello " + name);
console.log("Welcome to our website, " + name);
We can use +
operator append a string to the end of another string (concatenation):
var name = "Ola";
var greet = "Hello " + name;
var welcome = "Welcome to our website, " + name;
console.log(greet);
console.log(welcome);
What is a string?¶
A string is a series of characters. Some examples for the strings are listed below:
-
"Hello"
-
"Welcome to our website"
-
"Hello Ali"
-
'Hello, user1246'
-
"Nawras"
-
"I went to the park yesterday"
-
'123, this is how I count to three!'
-
"%%^&##fdgdg 5669sfdfk"
Strings are either enclosed within single or double quotation marks. Why?! if we add string without quotation marks, it is considered as a variable name. Let's try it out:
var answer = No;
console.log("Our answer is: " + answer );
Uncaught ReferenceError: No is not defined What does that mean? It simply means that the variable No
is not mentioned/defined anywhere in your code. Why did this happen? because we did not enclose the string No
in quotation marks. Let's fix it:
var answer = "No";
console.log("Our answer is: " + answer );
Now it works, you will get: Our answer is: No
Have some fun with strings¶
Task 1: Our friend Ali wants you to greet him 3 times. Display Ali's welcome message 3 times in the console.
var name = "Ali";
var greet = "Welcome";
console.log(greet + greet + greet + name);
WelcomeWelcomeWelcomeAli is displayed in the console. There are no spaces between the words, we can fix it:
var name = "Ali";
var greet = "Welcome";
console.log(greet + " " + greet + " " + greet + " " + name);
Welcome Welcome Welcome Ali is displayed in the console. Greet! But this is too much code, do not you think so?! Try the following code out:
var name = "Ali";
var greet = "Welcome ";
console.log(greet.repeat(3) + name);
You will get the same result: Welcome Welcome Welcome Ali
Task 2: Our friend Ola wants you to greet her 10 times. Display Ola's welcome message 10 times in the console.
var name = "Ola";
var greet = "Welcome ";
console.log(greet.repeat(10) + name);
You will get: Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Ola
Task 3: Count the characters mentioned in the sentence: "I count 1 to 10: 1 2 3 4 5 6 7 8 9 10". Hint: you can use string.length
var sentence = "I count 1 to 10: 1 2 3 4 5 6 7 8 9 10";
console.log(sentence.length);
The result will be: 37
Task 4: Count the letters in a given name. Then display this name x times in the console. x is equal to the count of the name letters. For example, there are 3 letters in "Ali", "Ali Ali Ali" will be displayed 3 times in the console.
var name = "Wolfeschlegelsteinhausenbergerdorff ";
var nameLength = name.length;
console.log(name.repeat(name.length));
fun fact: Wolfeschlegelsteinhausenbergerdorff is a real name, no joke. Google it!
You will get this lengthy name displayed 36 times in the console.
Task 5: Display the message "You are not allowed here" in the console. Make sure to capitalize the word not. Hint: use string.toUpperCase()
console.log("You are " + 'not'.toUpperCase() + " allowed here");
you will get: You are NOT allowed here
Task 6: Display the message "WELCOME TO OUR WEBSITE" in lowercase. Hint: use string.toLowerCase()
.
var welcome = "WELCOME TO OUR WEBSITE";
console.log(welcome.toLowerCase());
you will get: welcome to our website
Task 7: Create two variables; the first is called: name
: it contains the person's name. The second is called profession
: it contains the person's profession. Display the person's name and profession in one sentence. For Example: Ali is a programmer.
var name = "Jad";
var profession = "engineer";
console.log(name + " is an " + profession );
you will get: Jad is an engineer
Task 8: Create and display two different strings in the console. For Example, string1 = "abc", string2 = "def", "abcdef" is displayed in the console. Hint: use string1.concat(string2)
var string1 = "abc";
var string2 = "def";
console.log(string1.concat(string2));
you will get: abcdef
Task 9: Run the following code, and try to understand it.
var letters = "abcdef";
console.log(letters.indexOf("a"));
console.log(letters.indexOf("b"));
console.log(letters.indexOf("c"));
console.log(letters.indexOf("d"));
console.log(letters.indexOf("e"));
console.log(letters.indexOf("f"));
The result will be:
0
1
2
3
4
5
Task 10: Run the following code, and try to understand it.
var greet = "Welcome";
console.log(greet.indexOf('c'));
You will get: 3
You can guess that string.indexOf()
helps you to find the character position in a given string.
Note(1): The first character in the string has position of 0, the second one has position of 1, and so on.
Task 11: Find the position of a in a given string. Let it be "I went to the park yesterday.".
var sentence = "I went to the park yesterday.";
console.log(sentence.indexOf('a'));
You will get: 15.
Notice that you get the position of the first a
in the string.
Project: The Discount¶
-
A shop offers a 50% discount for orders over $100.
-
Display "Congrats, you get a 50% discount. Thank you for buying our products" in lowercase for customers who got the discount.
- If a customer got the discount, display his/her name x times. x is the number of characters in the customer's name.
- Display "Sorry, you get nothing. Your subtotal should be more than $100" in uppercase for customers who did not get the discount.
- If a customer did not get the discount, display his/her name in uppercase.
- A customer, named Soso, bought some products for $150.
- Sami bought a product for $50.
var customer1 = "Soso";
var customer2 = "Sami";
var success = "Congrats, you get 50% discount";
var failure = "Sorry, you get nothing. You should buy for the value more than $100";
console.log(success.toLowerCase() + " " + customer1.repeat(customer1.length));
console.log(failure.toUpperCase() + " " + customer2.toUpperCase());
The result will be:
congrats, you get 50% discount SosoSosoSosoSoso
SORRY, YOU GET NOTHING. YOU SHOULD BUY FOR THE VALUE MORE THAN $100 SAMI