Angular TIPS

Angular TIPS

文字列/配列から部分文字列/要素を抜き出すには?(slice)

2017年4月24日

JavaScriptのString/Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 2/4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

 sliceパイプを利用することで、文字列から特定位置の部分文字列を取り出したり、配列から特定の要素だけを抜き出したりすることが可能になります。JavaScript標準のString#sliceArray#sliceメソッドに相当するパイプです。

[構文]sliceパイプ

exp | slice:start [:end]

  • exp: 文字列、または配列
  • start: 抽出開始位置
  • end: 抽出終了位置

文字列から部分文字列を抜き出す

 まずは、文字列から部分文字列を抜き出す例から見ていきます。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ol>
      <li>{{msg | slice: 4 :7}}</li>
      <li>{{msg | slice: 4}}</li>
      <li>{{msg | slice: 10}}</li>
      <li>{{msg | slice: -3 :-2}}</li>
    </ol>
  `,
})
export class AppComponent  {
  msg = '1234567890';
}
リスト1 文字列msgから部分文字列を抜き出すためのコード(app.component.ts)
Webブラウザー
1. 567
2. 567890
3. 
4. 8
リスト2 出力結果:文字列から抜き出された部分文字列

 まず、リスト2の1がsliceパイプの基本です。5~7文字目を取得します*1

 引数endを省略した2の例では、引数startで指定された位置から文字列の末尾までを取り出します。

 3のように引数startが文字列長を超えている場合には、そもそも文字列を取り出せないので、戻り値は空文字列です。

  • *1 文字列の先頭は0文字目とカウントします。また、引数endで指定される要素(この場合はインデックス7=8文字目)は抜き出す対象とはなりません(endで示す直前の要素までが取得されると考えるとよいでしょう)。

 4は、引数startendに負数を指定した場合です。この場合、文字位置は文字列の末尾からカウントします。ただし、文字列の末尾は(0ではなく)-1と数える点に注意してください。

配列から特定範囲の要素を取得する

 冒頭述べたように、sliceパイプは文字列だけでなく、配列にも適用できます。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ol>
      <li>{{data | slice: 4 :7}}</li>
      <li>{{data | slice: 4}}</li>
      <li>{{data | slice: 10}}</li>
      <li>{{data | slice: -3 :-2}}</li>
    </ol>
  `,
})
export class AppComponent  {
  data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ];
}
リスト3 配列dataから特定範囲の要素だけを取り出すためのコード(app.component.ts)
Webブラウザー
1. 5,6,7
2. 5,6,7,8,9,0
3. 
4. 8
リスト4 出力結果:配列から抜き出された部分要素

 引数startendの考え方は、文字列の場合と同じです。先ほどのサンプルと比べながら、結果を確認してください。

処理対象:PIPE(パイプ) カテゴリ:基本
API:SlicePipe(slice) カテゴリ:@angular > common > PIPE(パイプ)

※以下では、本稿の前後を合わせて5回分(第12回~第16回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

12. 文字列を大文字/小文字に変換するには?(lowercase/uppercase)

JavaScriptのStringクラスにおけるtoLowerCase/toUpperCaseメソッドと同じように、Angularで文字列を小文字/大文字に変換できるlowercase/uppercaseパイプの基本的な使い方を説明する。

13. 数値データに桁区切り文字を付与するには?(number)

Angularで数値を桁区切り文字列に整形するための、numberパイプの基本的な使い方を説明する。整数と小数点以下の桁数を指定して整形することも可能。

14. 【現在、表示中】≫ 文字列/配列から部分文字列/要素を抜き出すには?(slice)

JavaScriptのString/Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明する。

15. Angular CLIとは? ― インストール方法と、アプリの骨格生成&実行

新規Angularアプリの作成時にAngular CLIを使うと効率的だ。そのインストール方法と、コマンド1つでAngularアプリのスケルトンを作成して、そのアプリを起動する方法を説明する。

16. Angular CLIで、Angularアプリのコードを自動生成するには?

Angular CLIのng generateコマンドを使ってAngularアプリ用コードを自動生成してみる。また、各アプリのAngular CLI設定ファイルをエディターで編集する方法も紹介する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社