The language and library I'm using is JS and AngularJS. Am I right in assuming that "interpolation" and "concatenation" both means "combination of strings and variables"?
But "interpolation" is used when you're using the double curly brackets in AngularJS. And "concatenation" is used when you're using pure JS?
Or is there another diference that I missed?
EDIT:
Is this interpolation or concatenation (I don't just put strings together but an a variable is resolved here)?
var test1 = "Hello";
var number = 2 + 3;
console.log(test1 + " " + number);
Hmm.... I guess whenever I use AngularJS library to combine some expression, then it's interpolation, right?
In Angular js interpolation helps in getting model render on the view. Where as concatenation is to allow the strings to be join together with '+' it may or may not include interpolation .
Example:-
{{}} --> interpolation
It allows your model to bind in view:-
Model:- $scope.name="rachit";
View:- <div>{{name}}</div>
result in View after rendering :- <div>rachit</div>
'+'-->concatenation
It allows to concat the values either in view or in controller or even inside interpolation.
Controller:-
$scope.name="rachit"+"gulati";
View
<div>{{name+name}}</div> //Here interpolation also comes into picture.
result:-"<div>rachitgualtirachitgualti</div>"
UPDATE 1:-
EDIT: Is this interpolation or concatenation (I don't just put strings
together but an a variable is resolved here)?
var test1 = "Hello";
var number = 2 + 3;
console.log(test1 + " " + number);
It is simple concatenation in javascript here angular is not come into picture.
UPDATE 2:-
Hmm.... I guess whenever I use AngularJS library to combine some
expression, then it's interpolation, right?
Concatenation is general term for every programming to concat two strings together.Where as in angualr js interpolation is done by {{}} with the help of $interpolation service.
Interpolation
Interpolation does mean that you want to get the code from the angular scope and show it on html page like suppose we have {{somevariable}} In this eg. it will evaluate the function in angular scope using $interpolation service.
Concatenation
It is used when you want to bind to two strings, It could be do it inside interpolation {{}} directive like {{someVariable + ' test'}} it will concate variable with test result would be someVariable test
Interpolation basically means that an expression gets resolved and concatenation is when you put a string together.
Related
I'm new to coding, and as a learning experience I've decided to make a little project.
I'm trying to modify an element's CSS style using JS, but i'm struggling with putting a JS variable as part of one of the arguments:
document.getElementById("squareContainer").setAttribute('"style","width:'+gridWidth+'*30 px"');
squareContainer is a div, and gridWidth is a JS variable with a value of a natural number larger than 0.
The goal is to set squareContainer's width attribute to be gridWidth*30 pixels wide, but console shows this error:
Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.
at life.html:33
I know it's because of the way I put single- and double-quotes in there, but I have no idea how to actually fix it. I've tried many combinations, but they don't work.
You seem to be passing just a single value to the setAttribute function. To fix this issue, you will have to get rid of the outer single quotes.
document.getElementById("squareContainer").setAttribute("style", "width:" + gridWidth * 30 + "px");
BONUS TIP:
As a better and clean alternative to string concatenation, you may use template strings for string interpolation, i.e., embedding a JS variable inside a string. Template strings use a backtick character (`) instead of usual quotation marks (' or "). You can rewrite the above line of code using template string as such:
document.getElementById("squareContainer").setAttribute("style", `width: ${gridWidth * 30}px`);
You are only passing only one value. Please try the below
document.getElementById("squareContainer").setAttribute("style","width:" + gridWidth * 30 + "px");
if you would like to use ES6
```js
document.getElementById("squareContainer").setAttribute("style",`width: ${gridWidth * 30}px`);
For more information
https://www.w3schools.com/jsref/met_element_setattribute.asp
https://www.w3schools.com/jsref/prop_html_style.asp
I am trying to pass an attribute in angular to my directive as a string something like
<custom-directive an-attribute="10/10/10"></custom-directive>
however when i try to access an-attribute it does the math operation and outputs 0.01. How can I prevent the attribute from doing the math operation?
Are you using an # or an = binding?
If using an # binding, an-attribute="10/10/10" should work as is. This may be what you want.
If using an = binding, an-attribute="'10/10/10'" should do the trick.
I have the following arrangement to fetch helptexts from a single Coffeescript file.
Coffeescript:
help.ex: '{{example.variable}} identifies enterprise data centers'
HAML:
%example-directive(attr='{{help.ex}}')
Now the example.variable is accessible but it is not getting interpolated on the view. This I guess is happening because the string as a whole is getting interpolated and compile is not running on the variables within. How do I get around this?
You can use the $interpolate service:
var exp = $interpolate(attrs.attr) // interpolate your attriubte
var interpolated = exp(scope) // evaluate it with the scope variable
Check this plunker
My question is simple but I can't seem to find the solution. I'm changing my html through javascript. I have a header with an image that I want to change every 3 seconds or so. I made an array with the name of the images I want in my cycle.
For changing the image I made a variable with the name of the image. I then try to insert the value of the string into the follow statement:
imageParent.style.backgroundImage = "url('images/"nextImage".jpg')";
But as you see this is completely the wrong syntax. What is the correct syntax for this?
What you're trying to do is known as string concatenation. In JavaScript it is most easily done using the + operator:
"url('images/" + nextImage + ".jpg')"
See The + Operator Used on Strings at http://www.w3schools.com/js/js_operators.asp.
try maybe +nextImage+ instead of nextImage
I'd like to know the difference between the following and the role of the parentheses:
foo.bar.replace(a,b)
and
(foo.bar).replace(a,b)
do the parentheses require the contained expression to be evaluated first before moving on to the replace method? I have seen this in code I am maintaining and am curious as to why it would be neccessary? E.G.
location.hash.replace(a,b)
and
(location.hash).replace(a,b)
It is not required in your examples.
The idea is indeed that the block inside the parenthesis must be evaluated before continuing..
It is needed in cases like
(new Date()).getMilliseconds()
(not really needed in this case as noted by #Teemu)
In general use this syntax to avoid using a temporary variable..
var result = 5.3 + 2.9;
console.log( result.toFixed(1) );
can become
console.log( (5.3 +2.9).toFixed(1) );
If you were to use 5.3 + 2.9.toFixed(1) the toFixed(1) would get applied to 2.9 only, return a string and then concatenate it with 5.3 The result would be 5.32.9