Angularで文字列／配列から部分文字列／要素を抜き出すには？（slice）：Angular TIPS

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

» 2017年04月24日 05時00分公開

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 2／4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

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

［構文］sliceパイプ

exp | slice:start [:end]

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

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

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

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

@Component({
selector: 'app-root',
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）

▼

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は、引数start／endに負数を指定した場合です。この場合、文字位置は文字列の末尾からカウントします。ただし、文字列の末尾は（0ではなく）-1と数える点に注意してください。

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

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

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

@Component({
selector: 'app-root',
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 ];
}