LoginSignup
3
5

More than 5 years have passed since last update.

js 文章の切り捨てかた

Last updated at Posted at 2016-12-15

お題

・文章(第一引数)が指定された数(第二引数)より長い場合、指定された数で文字を切り捨てる。
・切り捨てた文章には"..."を末尾に付け足す。("..."は文字数に含まれる)
切り捨てる文字が3以下の場合はそのまま"..."を付け足す。

script.js
function truncateString(str, num) {
 //write your code
}
truncateString("A-tisket a-tasket A green and yellow basket", 11) // "A-tisket..."

出力結果 例

script.js
("A-tisket a-tasket A green and yellow basket", 11) // "A-tisket..."
("Peter Piper picked a peck of pickled peppers", 14) //"Peter Piper..."
("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length) // "A-tisket a-tasket A green and yellow basket"
("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)// "A-tisket a-tasket A green and yellow basket"
("A-", 1)//"A..."
("Absolutely Longer", 2)//"Ab..."

使った関数

slice()

何も考えずに書いたコード

script.js
function truncateString(str, num) {
 var j = str.length;
 var l = str.slice(0,num);
 var k = num - 3;
 var m = str.slice(0,k);


  if(str.length<=3){
    return l+= "...";
  }else if(str.length<=num){
    return str;
  }else if(num<3){
    return str.slice(0,2) + "...";
  }else{
    m += "...";
    return m;
  }
}
script.js
function truncateString(str, num) {
  if (str.length > num && num > 3) {
    return str.slice(0, (num - 3)) + '...';
  } else if (str.length > num && num <= 3) {
    return str.slice(0, num) + '...';
  } else {
    return str;
  }

}

工夫したコード

script.js
function truncateString(str, num) {
  if (str.length <= num) {
    return str;
  } else {
    return str.slice(0, num > 3 ? num - 3 : num) + '...';
  }
}

考え方

ひとつめのif 切り捨てる数が文字数と同じ以上の場合は文字列をそのまま返す。
else以下 三項演算子の条件をslice()の終点(第二引数)に設定する。
切り捨てる数が3より大きい場合、 num-3 で文字を切り捨てる。
3より小さい場合、numで切り捨てる。
最後に'...'を付け足す。

他にもコードが浮かんだ方、コメントお待ちしてます。

3
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5