2015年04月11日

sliceメソッド JavaScript

スポンサード リンク

 文字列の指定範囲を返します。
'対象文字列'.slice(start引数,end引数)

対象の文字列から2つの引数で指定した範囲の
部分文字列を取り出し、新しい文字列を返します。

インデックス値
対象文字列 A B C D E  
最初から 0 1 2 3 4 5 6 7 8 9
最後から -10  -9  -8  -7  -6  -5  -4  -3  -2   -1 

 slice()メソッドは、start引数(開始位置)とend引数(終了位置)を指定し、
その範囲内の文字列を抽出します。
対象文字列の最初がインデックス値「0」になります。

 var str="ABCDE メソッド"
str.slice(0,3) --> "ABC"    ( ※ end引数の 1つ前の文字まで )
str.slice(0,5) --> "ABCDE"
str.slice(3,8) --> "DE メソ"

end引数は省略が可能で、省略すると最後まで取り出します。

str.slice(0) --> "ABCDE メソッド"
str.slice(4) --> "E メソッド"
str.slice(6) -->"メソッド"

 インデックス値には負の整数値を設定することも可能です。
この場合は対象文字列の最後から数えた位置になります。

str.slice(-10,-6) --> "ABCD"
str.slice(-8)     --> "CDE メソッド"
str.slice(3,-2)   --> "DE メソ"

 start 引数で指定した開始位置が
end引数 で指定した終了位置より後に来る場合、何も返しません。

str.slice(8,6)   --> "   "
str.slice(7,-7)  --> "   "
str.slice(-3,-5) --> "   "
slice() メソッド  お試し box 

対象文字列:

↓ 半角数値を入力 ↓
start 引数:  ,  end 引数:    

実行結果:  

コロリポプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)
イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>cssTextプロパティ</title>
<!--動作に不要なコードは省略していることがあります-->

<script type="text/javascript">
function sliceSmp() {
   var strVal = document.getElementById("sliceStr").value;
   var startVal = document.getElementById("sliceStart").value;
   var endVal = document.getElementById("sliceEnd").value;
   var outputID = document.getElementById("outPut");
 if (endVal == "" ) {  // end引数を省略した場合
      outputID.innerHTML = strVal.slice(startVal);
       } 
else {
       outputID.innerHTML = strVal.slice(startVal, endVal);
          }
      }
  </script>

 </head>
<body>
  <form>
<fieldset><legend>slice() メソッド&nbsp; お試し box</legend>
<p>対象文字列: <input type="text" value="ABCDE メソッド"
   size="20" id="sliceStr" /></p>
<p>start 引数: <input type="text" value="1" size="3" id="sliceStart" /> 
   end 引数: <input type="text" value="-3" size="3" id="sliceEnd" />
   <input type="button" value="実行" onclick="sliceSmp()" /></p>
<p>実行結果:&nbsp;&nbsp; <span id="outPut"></span> </p>
</fieldset>
 </form>
</body>
</html>

posted by javaScript at 01:42 | 大阪 ☔ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。