[JavaScript] How to format string?

String.format = function(src){
  if (arguments.length == 0) 
    return null;

  var args = Array.prototype.slice.call(arguments, 1);
  return src.replace(/\{(\d+)\}/g, function(m, i)
  {
    return args[i];
  });
};

Demo:
msg will be "This is variable A and variable B.

var template = "This is variable {0} and variable {1}";
var variable1 = "A";
var variable2 = "B";
var msg = String.format(template, variable1, variable2);

[JavaScript] How to auto truncate text?

Sometimes we need to auto truncate text when the width of text division is not enough to fit the text. For example, we have a text like "Hello, I am a long long long text." But the text division only can show "Hello, I am a long long". I this case, the last long could not be shown normal. To ensure text presentation normally in screen, we need a function to calculate the width of input text and auto truncate text with tail token (ex: ...).

JavaScript code:

function autoEllipseText(element, text, width)
{
   element.innerHTML = '' + text + '';
   inSpan = document.getElementById('ellipsisSpan');
   if(inSpan.offsetWidth > width)
   {
      var i = 1;
      inSpan.innerHTML = '';
      while(inSpan.offsetWidth < (width) && i < text.length)
      {
         inSpan.innerHTML = text.substr(0,i) + '...';
         i++; 
      } 
                
      returnText = inSpan.innerHTML; 
      element.innerHTML = '';
      return returnText;
   }
   return text;
}

Usage:

function setCellText()
{
   cellElement = document.getElementById('textCell');
   textBoxElement = document.getElementById('cellText');
   cellElement.innerHTML = 
       autoEllipseText(cellElement, textBoxElement.value, 80);
}

References:

• Javascript Tutorial - How to Auto Ellipse Text

[JavaScript] JSLint 文斯不負責報導

JSLint是一套可以幫你檢查你的JavaScript程式中語法和語意是否有錯誤的工具。

接下來我們來看看JSLint能幫我們什麼忙？

全域變數(Global Variables)
JavaScript 中只要變數使用前沒有先用var宣告過，該變數就會是全域變數。這可能會導致變數名字拼錯等問題發生。JSLint會檢查是否所有變數和函數在它被使用前應該要先宣告過。 這可以使程式更容易閱讀。

分號(Semicolon)
JavaScript類似C語言的語法，因此需要使用分號來分隔的程式陳述(Statement)。在JavaScript中，可以換行空格，也可以作為一個分號做為程式陳述的結尾，但這可能會導致錯誤發生。因此JSLint會檢查每個程式陳述之後 ， 除了for、function、if、switch、try和while。 JSLint 不希望看到不必要的分號或空語句。

逗號(Comma)逗號運算元可以用於程式技巧表達上。它也可能掩蓋一些程式錯誤。JSLint會檢查是否逗號只作為分隔符號，且不能作為運算元（除在程式初始化和for的程式陳述上）。它不希望看到省略元素在陣列字元上。也不應該有額外的逗號。一個逗號不應該出現在陣列或物件的最後一個元素後，因為它在某些瀏覽器上會出錯。

程式範圍(Scope)
在許多程式語言中，程式區塊定義了程式的範圍。 在程式區塊中定義的變數在程式區塊外則是不可見的。在JavaScript中，程式區塊則不會定義了程式的範圍。只有函數才有程式範圍的概念。如果一個變數在函數中任何地方被定義的，則該變數在函數中任何地方皆為可用的。因此JavaScript的程式區塊易造成混淆。JSLint會檢查是否程式區塊只在function、if、switch、while、for、do和try中。在程式區塊的範圍中，通常變數的量定義是在第一次使用時。但由於JavaScript沒有程式範圍的概念，因此最好在函數開始就宣告所有的變數，且最好一行只宣告一個變數。

程式區塊(Block)
JSLint會檢查是否只有if、while、do和for的程式陳述有程式區塊。

表達式陳述(Expression Statements)

1. For in: 使用for in陳述可以列舉變數中所有的元素，但確保不會存取到不想存取的屬性，最好在for in中用hasOwnProperty來檢查一下。
2. switch: 在下一個case或default之前的陳述必須是break、return或throw。
3. var: 每一個變數或函數皆需要使用var宣告，且只能宣告一次，但參數(parameters)、引數(arguments)及程式區塊則不用。
4. with: 不要使用with，它容易造成混淆。
5. =: 邏輯判斷時不要使用=。
6. == and !=: 與null、0、undefined、true、false這些值比較時，一定要用===和!==，因為 JavaScript 有神祕的型別轉換，讓你的 null==undefined 但是null != false，要判斷是否是以上列舉值的其中任一種時，就用===和!==吧，如果只是要 true/false 判斷，則可以用==和!=。
7. labels: 只能在break有作用的程式區塊(ex: switch, while, do, and for)允許使用label。
8. Unreachable Code: return、break、continue或throw陳述後必須接著}、case或 default。以避免產生執行不到的程式碼。
9. Confusing Pluses and Minuses: 不要使用+後接+或++，-後接-或--的情形。
10. ++ and --: 不要使用++或--。
11. Bitwise Operators: 不要使用bit運算元。
12. eval is evil: 不要使用eval。
13. void: 在JavaScript中void代表undefined，因此不要使用void。
14. Regular Expressions: 正規表示法之前的字元需為(、=、:或,。
15. Constructors and new: 不要使用new在Number、String或Boolean上，也不要使用new在物件(Object)或陣列(Array)上。可以使用 {} 建立物件， [] 建立陣列。
16. Unsafe Characters: \u0000-\u001f、\u007f-\u009f、\u00ad、\u0600-\u0604、\u070f、\u17b4、\u17b5、\u200c-\u200f、\u2028-\u202f、\u2060-\u206f、\ufeff、\ufff0-\uffff為不安全字元，使用時需使用脫離(Escape)函數處理。

References:

• What is JSLint?
• JavaScript Best Practice Part.1: JSLint