Limit string with jquery on text()

Question

i've a problem with jquery.

my code:

$("#MonthsDataTotal").text(obj.info["MonthsDataTotal"] / 1024);

So i need to set substring like this:

$("#MonthsDataTotal").text(obj.info["MonthsDataTotal"] / 1024).substring(0,5);

I've wanted online and i found substring or substr method, but this didn't work for me. It's a simple questione but i don't find a solution. How to set a limit string on print with text() method of jquery?

Thanks.

Answer 1

As you can't substring one number, you need to convert it to string with toString, String() or even (a not-so-beautiful way) adding quotation marks:

//toString(): 
(obj.info["MonthsDataTotal"] / 1024).toString();

//String():
String(obj.info["MonthsDataTotal"] / 1024);

//adding '' or "":
((obj.info["MonthsDataTotal"] / 1024) + '')
((obj.info["MonthsDataTotal"] / 1024) + "")

And you can use slice or substr instead of substring.
Note: substring and substr have different behaviors

var num = 99999999;

//division without conversion
$("#wconv").text(num / 1024);

//conversions to string
var tostr = (num / 1024).toString();
var str = String(num / 1024);
var sq = (num / 1024) + '';
var dq = (num / 1024) + "";

//showing conversions
$("#tostr").text(tostr);
$("#str").text(str);
$("#sq").text(sq);
$("#dq").text(dq);

//using substring
$("#tostrsub").text(str.substring(0,5));
$("#strsub").text(str.substring(0,5));
$("#sqsub").text(sq.substring(0,5));
$("#dqsub").text(dq.substring(0,5));

//using slice
$("#tostrsli").text(str.slice(0,5));
$("#strsli").text(str.slice(0,5));
$("#sqsli").text(sq.slice(0,5));
$("#dqsli").text(dq.slice(0,5));

//using substr
$("#tostrsbr").text(str.substr(0,5));
$("#strsbr").text(str.substr(0,5));
$("#sqsbr").text(sq.substr(0,5));
$("#dqsbr").text(dq.substr(0,5));

table{
  border: 1px solid black;
  text-align: center;
}

th {
  min-width: 100px;
}

thead tr th{
  border-bottom: 1px solid black;
}

tfoot tr th, tfoot tr td{
  border-top: 1px solid black;
}

td, th {
  border-right: 1px solid black;
}

td:last-child, th:last-child{
  border-right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th></th>
      <th>Converted</th>
      <th>Substring</th>
      <th>Slice</th>
      <th>Substr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>toString()</th>
      <td><span id="tostr"></span></td>
      <td><span id="tostrsub"></span></td>
      <td><span id="tostrsli"></span></td>
      <td><span id="tostrsbr"></span></td>
    </tr>
    <tr>
      <th>String()</th>
      <td><span id="str"></span></td>
      <td><span id="strsub"></span></td>
      <td><span id="strsli"></span></td>
      <td><span id="strsbr"></span></td>
    </tr>
    <tr>
      <th>Single quotes</th>
      <td><span id="sq"></span></td>
      <td><span id="sqsub"></span></td>
      <td><span id="sqsli"></span></td>
      <td><span id="sqsbr"></span></td>
    </tr>
    <tr>
      <th>Double quotes</th>
      <td><span id="dq"></span></td>
      <td><span id="dqsub"></span></td>
      <td><span id="dqsli"></span></td>
      <td><span id="dqsbr"></span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Number / 1024: </th>
      <td colspan="4"><span id="wconv"></span></td>
    </tr>
   </tfoot>
</table>