javascript 後ろから指定した数の文字列を削除する

2020.09.09
javascript
javascript

javascriptで、sliceメソッドを使用して後ろから指定した数の文字列を削除するサンプルコードを記述してます。

1. 環境
2. sliceメソッド使い方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

sliceメソッド使い方

sliceメソッドを使うと、後ろから指定した数の文字列を削除することが可能です。

str.slice(0,マイナス値);

//先頭から数えてマイナス1つ前までということになる

str.slice(0,マイナス値);

//先頭から数えてマイナス1つ前までということになる

sliceメソッド使い方

var str = "あいうえお";

//後ろから１文字を削除する
var result = str.slice(0,-1);
console.log(result);

//後ろから２文字を削除する
var result = str.slice(0,-2);
console.log(result);

var str = "あいうえお";

//後ろから１文字を削除する

var result = str.slice(0,-1);

console.log(result);

//後ろから２文字を削除する

var result = str.slice(0,-2);

console.log(result);

サンプルコード

以下は、ランダムな文字列を作成して、フォームで指定した数の文字列を後ろから削除するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
  }
</style>
<script>

function hoge() {

  // ランダムな文字列を生成
  var str = Math.random().toString(36).slice(-8);
  document.getElementById('txt').textContent = str;  
  
  var num = Number(document.getElementById('num').value);
  // 後ろから指定した文字数を削除
  var result = str.slice(0,-(num));
  document.getElementById('result').textContent = result;
}
</script>

<body>
  <div class="main">

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">ランダムな文字列</h4>
      <p id="txt"></p>
      <hr>
      <p id="result" class="mb-0"></p>
    </div>

    <form>
      <div class="form-group">
        <label for="formGroupExampleInput" class="bmd-label-floating">削除する文字数</label>
        <input type="number" class="form-control" id="num">
      </div>
    </form>

    <button type="button" class="btn btn-raised btn-primary" onclick="hoge()">生成</button>

  </div>
</body>

</html>