プログラミング初心者です。スライドショーを作っているんですが、numberが何を意味するものなのか教えてください。

問題の場所はJSの23行目にある page.innerHTML=(Number(current)+1)+'/'+images.length;
のnumberです。
これは今メインの画面で表示されているスライドがスライド３枚中何枚目かを示す記述です。

メインの画像の下にある複数のサムネイルをクリックすると、それがメインの画像になります。

３枚ある画像を左から順にクリックすると 1/3 2/3 3/3と表示されるのですが、Numberを外すと01/3　11/3 21/3　と表示されます。　このnumberは何を意味するものなんでしょうか。

HTML
1コード
2
3<!DOCTYPE html>
4<html lang="ja">
5<head>
6    <meta charset="UTF-8">
7    <title>スライドショー</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <div class="container">
12      <div class="image_box">
13        <img id="main_image" src="IMG/coffee-01.jpg" >
14      </div>
15
16    <ul id="thumbnails">
17        <li> <img class="thumbnail_image"  src= "IMG/coffee-01.jpg" data-image="coffee-01.jpg" data-index="0"></li>
18        <li> <img class="thumbnail_image"  src="IMG/coffee-02.jpg"  data-image="coffee-02.jpg" data-index="1"></li>
19        <li> <img class="thumbnail_image"  src="IMG/coffee-03.jpg"  data-image="coffee-03.jpg" data-index="2"></li>
20        
21       
22    </ul>
23
24    <div class="toolbar">
25      <div class="nav">
26        <div id="prev">＜＜</div>
27        <span id="page"></span>
28        <div id="next">＞＞</div>
29
30      </div>
31    </div>
32    </div>
33
34    <script src="main.js"></script>
35
36    
37    
38
39
40    <div id="elm"  data-name="前本"　 data-type="cool"> </div>
41    <script>
42      var elm=document.getElementById("elm");
43       elm.dataset.name;
44
45    </script>
46</body>
47</html>

CSS
1コード
2
3.container{
4    margin:0 auto;
5    border:1px solid black;
6    width:720px;
7    background-color:black;
8}
9
10#main_image{
11    max-width:100%;
12}
13
14#thumbnails{
15    margin:5px;
16}
17
18ul{
19    overflow:hidden;
20    margin:0px;
21    padding:0px;
22    list-style-type:none;
23
24}
25
26li{
27    float:left;
28    margin-right: 10px;
29    width:90px;
30    height:50px;
31}
32
33.thumbnail_image{
34    width:90px;
35    height:60px;
36}
37
38.current_image{
39    border:3px solid white;
40}
41
42.nav{
43    display:inline-block;
44}
45
46.toolbar{
47    overflow:hidden;
48    text-align:center;
49}
50
51#prev{
52    color:white;
53    float:left;
54    width:40px;
55    height:40px;
56    cursor:pointer;
57}
58
59#next{
60    color:white;
61    float:left;
62    width:40px;
63    height:40px;
64    
65}
66
67#page{
68    display:inline-block;
69    float:left;
70    height:40px;
71    color:white;
72}

javascript
1コード
2(function(){
3 'use strict'
4
5 var images=['coffee-01.jpg','coffee-02.jpg','coffee-03.jpg'];
6
7 var current=0;
8 var prev=document.getElementById('prev');
9 var next=document.getElementById('next');
10 var page=document.getElementById('page');
11
12 var main_image=document.getElementById('main_image');
13 var thumbs=document.querySelectorAll('.thumbnail_image');
14
15 for(var i=0; i<thumbs.length;i++){
16   thumbs[i].addEventListener('click', function(){
17       main_image.src="IMG/"+this.dataset.image;
18       current=this.dataset.index;
19       displayPageNumber();
20   });
21 }
22
23 function displayPageNumber(){
24   page.innerHTML=(Number(current)+1)+'/'+images.length;
25 }
26 displayPageNumber();
27
28
29})();
30
31
32
33
34