String Concatenation

When working with JavaScript strings sometimes you need to join two or more strings together in to a single string. Joining multiple strings together is known as concatenation.

The concatenation operator

The concatenation operator (+) concatenates two or more string values together and return another string which is the union of the two operand strings.

The shorthand assignment operator += can also be used to concatenate strings.

Example :

The following web document demonstrates the use of concatenation operator (+) and shorthand assignment operator +=.

HTML Code

view plainprint?
<!doctype html>  
<head>  
<meta charset="utf-8">  
<title>JavaScript string operator example.</title>  
<meta name="description" content="This document contains an example of JavaScript string operator"/>  
</head>  
<body>  
<script src="javascript-string-operator-example1.js"></script>  
</body><br></html>  

JS Code

view plainprint?
var newParagraph = document.createElement("p");   
var newText = document.createTextNode("'google' + '.' + ' com=" + 'google' + '.' + ' com');  
newParagraph.appendChild(newText);   
document.body.appendChild(newParagraph);   
  
var string1= 'google';  
var newParagraph1 = document.createElement("p");   
var newText1 = document.createTextNode('string1='+string1);  
newParagraph1.appendChild(newText1);  
document.body.appendChild(newParagraph1);  
  
string1 +='.com';  
var newParagraph1 = document.createElement("p");   
var newText1 = document.createTextNode('string1='+string1);  
newParagraph1.appendChild(newText1);  
document.body.appendChild(newParagraph1);   

View the example in the browser

Practice the example above online

JavaScript : Conditional Operator

?: (Conditional operator)

The conditional operator is used as a shortcut for standard if statement. It takes three operands.

Syntax

Condition ? expr1 : expr2

Parameters

condition : An expression that evaluates to true or false.

expr1, expr2 : Expressions with values of any types.

If condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2.

For example

status = (marks >= 30) ? "Pass" : "Fail"

The statement assigns value "Pass" to the variable status if marks is 30 or more. Otherwise it assigns the value of "Fail" to status.

Example :

In the following web document the conditional operator statement [status = (marks >= 30) ? "Pass" : "Fail"] assigns value "Pass" to the variable status if marks is 30 or more. Otherwise it assigns the value of "Fail" to status.

HTML Code

view plainprint?
<!doctype html><head>  
<meta charset="utf-8">  
<title>JavaScript conditional operator example with DOM</title>  
<meta name="description" content="This document contains an example of JavaScript conditional operator with DOM" />  
</head>  
<form name="example" onsubmit="ViewOutput()">  
<input type="text" id="marks" placeholder="Enter Marks" />  
<input type="submit" value="Submit" />  
</form>  
<body>  
<script src="javascript-conditional-operator-example1.js">  
</script>  
</body>  
</html>  
   

JS Code

view plainprint?
function ViewOutput()  
{  
'use strict';  
var marks = document.getElementById("marks").value;  
var status1 = (marks >= 30) ? "Pass" : "Fail";  
var newParagraph = document.createElement("p"); //creates a new paragraph element  
var newText = document.createTextNode(status1); //creates text along with ouput to be displayed   
newParagraph.appendChild(newText); //created text is appended to the paragraph element created  
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body  
}  

View the example in the browser