Skip to content

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

  1. A shop offers a 50% discount for orders over $100.

  2. Display "Congrats, you get a 50% discount. Thank you for buying our products" in lowercase for customers who got the discount.

  3. If a customer got the discount, display his/her name x times. x is the number of characters in the customer's name.
  4. Display "Sorry, you get nothing. Your subtotal should be more than $100" in uppercase for customers who did not get the discount.
  5. If a customer did not get the discount, display his/her name in uppercase.
  6. A customer, named Soso, bought some products for $150.
  7. 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