How can i directly covert the string into number in template literals in javascript?

Question

How can i directly convert the string into number in template literals in javascript?

Actually i am working on django templating for loop. My HTML is:

<div class="container"></div>
<button id="bt">Button</button>

My views.py is:

addpost = list(addPost.objects.filter(category='Technology').values())
context = json.dumps({"addDict":addpost})
return render(request, "blog/technology.html", {"addDict":context, "addpost":addpost})

My Javascript code:

<script>
 var data = JSON.parse("{{addDict|escapejs}}");
 data = data["addDict"];
 let showContent = document.querySelector(".container");
 var start = 5;
 var end = 8;
 function buttonClickHandler(){
 console.log(typeof end);
 let text = (`
<div class="container1">
{% for show in addpost|slice:"5:${end}" %}
{% ifequal show.category "Technology" %}
<div class="post">
<img src="https://source.unsplash.com" alt="">
<div>
<span><b style="font-size:14px;">Tariq Ahmed </b><span style="font-size:12px;">in </span><b style="font-size:14px;">{{show.category}}</b></span>
</div>
<h6>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore rerum ipsam dolore error.</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum natus optio facere accusamus soluta consequuntur---</p>
<p><a href="">Read more . </a><span>4 min read</span></p>
</div>
{% endifequal %}
{% if forloop.counter|divisibleby:3 and not forloop.last %}
</div>
<div class="container1">
{% endif %}
{% endfor %}
</div>
    `);
    showContent.insertAdjacentHTML("beforeend", text);
}
bt.addEventListener("click", buttonClickHandler)
</script>

i have a problem in javacript code in this line {% for show in addpost|slice:"5:${end}" %} When i am using varaible in template-literals it returns string type, this creating a problem, but when i type manually any number it works fine. My question is how can i convert directly into number within literals?

if you do not get understand this method so please tell me other method, how can i show my some posts on html page, and if user click load more button 6 other posts are shown below through ajax or whatever and if user again click so on 6 posts increase every time click of user.

Answer 1

<script>
    var data = JSON.parse("{{addDict|escapejs}}");
    data = data["addDict"];
    let showContent = document.querySelector(".container");
    var start = 5;
    var end = 8;
    function buttonClickHandler(){
    console.log(typeof end);
    let text = (`
<div class="container1">
{% for show in addpost|slice:"5:${+end}" %}
{% ifequal show.category "Technology" %}
<div class="post">
<img src="https://source.unsplash.com" alt="">
<div>
<span><b style="font-size:14px;">Tariq Ahmed </b><span style="font-size:12px;">in </span><b style="font-size:14px;">{{show.category}}</b></span>
</div>
<h6>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore rerum ipsam dolore error.</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum natus optio facere accusamus soluta consequuntur---</p>
<p><a href="">Read more . </a><span>4 min read</span></p>
</div>
{% endifequal %}
{% if forloop.counter|divisibleby:3 and not forloop.last %}
</div>
<div class="container1">
{% endif %}
{% endfor %}
</div>
    `);
    showContent.insertAdjacentHTML("beforeend", text);
}
bt.addEventListener("click", buttonClickHandler)
</script>

if end is string then you can put a "+" before that now it will be a number

Answer 2

We can use plus. For example:

var personAge = '24';
var personAge1 = (+personAge)

then if we see the new variable's type by typeof personAge 1; which is number .