悩む人String filtersってどうやって使うの？
こんな疑問を解決します。
- String filtersとは
- String filtersの種類
- String filtersの使い方
Shopifyには出力する値を加工できるフィルターがいくつも用意されていて、文字列を加工できるのが『String filters』です。
前回はこのString filters全28種類のうちの14個の使い方を解説しました。
ということで今回は、Shopifyで文字列の加工に使えて便利なString filtersの残り14種類とその使い方について解説していきます。
本記事を参考にすれば、文字を出力する際にどれを使えば良いのかが明確になり、テーマカスタマイズもスムーズになるはずです。
本記事はShopifyの公式リファレンスを参照して記述しています。
String filtersとは
String filtersとは、String（文字列）型の変数や出力を様々に加工できるフィルターのことです。
トマトソース少し数は多いですが、非常に大切なところなのでぜひともマスターしておきたいフィルターの一つです。
String filtersの種類
Shopifyで使用できるString filtersは以下の28種類です。
トマトソース28種類って、かなり多いですよね！
前回の記事は上記の1〜14までを解説しましたので、今回は残りの15〜28までのString filtersの使い方を解説していきます。
String filtersの使い方
それではそれぞれのフィルターの使い方を解説していきます。
pluralize
pluralizeは、文字列を英語の単数形または複数形にして出力します。
トマトソース日本語では、複数形や単数形で分けることはないので、日本語でストアを構築する際には使わないフィルターですね。
pluralizeの記述例と出力結果は以下の通りです。
{{ cart.item_count }}
{{ cart.item_count | pluralize: 'item', 'items' }}
出力：
3 itemspluralizeは英語に対してものものなので、他の言語の単数・複数形の対応はしていません。
remove
removeは、文字列から指定した文字を削除します。
removeの記述例と出力結果は以下の通りです。
{{ "Hello, world. Goodbye, world." | remove: "world" }}
出力：
Hello, . Goodbye, .必要ないものが出力される時なんかに使えますね！
remove_first
remove_firstは、文字列から指定した文字と一致する最初の文字列を削除します。
トマトソース上記のremoveと似ていますが、一致した最初の文字列という点に注意です。
remove_firstの記述例と出力結果は以下の通りです。
{{ "Hello, world. Goodbye, world." | remove_first: "world" }}
出力：
Hello, . Goodbye, world.上記の例のように、初めの「world」だけ消えているのがわかるかと思います。
replace
replaceは、文字列から指定した文字を特定の文字列に入れ替えます。
replaceの記述例と出力結果は以下の通りです。
<!-- product.titleが"Awesome Shoes"の場合 -->
{{ product.title | replace: 'Awesome', 'Mega' }}
出力：
Mega Shoes上記の例からもわかるかと思いますが、replaceの後の1つ目が入換対象の文字列で、2つ目が入換後の文字列となります。
replace_first
replace_firstは、文字列から指定した文字と一致する最初の文字列を特定の文字列に入れ替えます。
トマトソースこれも基本的にはreplaceと同様ですが、一致する最初の文字列という点に注意です。
replace_firstの記述例と出力結果は以下の通りです。
<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}
出力：
Mega Awesome Shoesslice
sliceは、インデックスで指定した範囲の文字を抽出し返却します。
オプションとして2つ目のパラメータを渡すことができ、2つ目のパラメータでは抽出する文字の長さを指定します。
sliceの記述例と出力結果は以下の通りです。
{{ "hello" | slice: 0 }}
{{ "hello" | slice: 1 }}
{{ "hello" | slice: 1, 3 }}
出力：
h
e
ellオプションの2つ目のパラメータで長さを指定しない場合は、1つ目のパラメータで指定したインデックスの文字飲み返却されます。
マイナスのインデックスの指定
sliceではマイナスのインデックスでの指定もでき、その場合は文字列の最後からカウントされます。
マイナスのインデックスを指定したsliceの記述例と出力結果は以下の通りです。
{{ "hello" | slice: -3, 2 }}
出力：
llsplit
splitは、文字列を特定の文字で分割します。
splitで分割された文字は、配列として返却されます。
splitの記述例と出力結果は以下の通りです。
{% assign words = "Hi, how are you today?" | split: ' ' %}
{% for word in words %}
{{ word }}
{% endfor %}
出力：
Hi,
how
are
you
today?上記の例ではforloopが出てきていますが、これについてはまた後日詳しく解説します。
strip
stripは、タブやスペース、改行など全てのホワイトスペースを文字列から取り除きます。
stripの記述例と出力結果は以下の通りです。
{{ ' too many spaces ' | strip }}
出力：
too many spaces上記のように、stripを使えば文字列の左右両サイドの空白を取り除くことができます。
lstrip
lstripは、タブやスペース、改行など全てのホワイトスペースを文字列の左側から取り除きます。
トマトソースstripと違って左側であるとこに注意です。
lstripの記述例と出力結果は以下の通りです。
{{ ' too many spaces ' | lstrip }}
出力：
too many spaces 上記の例の文字列の右側に空白があるか確かめるには、ハイライトしてみてください。
rstrip
rstripは、タブやスペース、改行など全てのホワイトスペースを文字列の右側から取り除きます。
トマトソース今度は文字列の右側ということに注意です。
rstripの記述例と出力結果は以下の通りです。
{{ ' too many spaces ' | rstrip }}
出力：
too many spacesstrip_html
strip_htmlは、文字列から全てのHTMLタグを取り除きます。
strip_htmlの記述例と出力結果は以下の通りです。
{{ "<h1>Hello</h1> World" | strip_html }}
出力：
Hello Worldstrip_newlines
strip_newlinesは、文字列のなかの改行を取り除きます。
strip_newlinesの記述例と出力結果は以下の通りです。
<!-- product.descriptionに「これはXXXXXXの商品です。(改行)
是非一度お試しください！」のような文字列が入っている場合
-->
{{ product.description | strip_newlines }}
出力：
これはXXXXXXの商品です。是非一度お試しください！このように文字列の中の改行が取り除かれて1行になります。
truncate
truncateは、パラメータで指定した番号の箇所以降の文字を切り捨てます。
切り捨てられた文字列は、省略符号（…）として表示されます。
truncateの記述例と出力結果は以下の通りです。
{{ "The cat came back the very next day" | truncate: 13 }}
出力：
The cat ca...ここで一つ注意なのは、パラメータで指定した数に省略符号の「…」の3つが含まれるという点です。
なので、もしここまでは絶対に表示したいという箇所があれば、表示したい文字の3大きい数字を指定する必要があります。
truncatewords
truncatewordsは、パラメータで指定した番号の単語以降を切り捨てます。
トマトソース上記のtruncateとは異なり、単語単位で数えられます。
truncatewordsの記述例と出力結果は以下の通りです。
{{ "The cat came back the very next day" | truncatewords: 4 }}
出力：
The cat came back...truncatewordsの場合は、省略符号の「…」は1単語として数えられません。
String filtersの種類と使い方を解説②：まとめ
今回は前回に引き続き、String filters14種類について解説していきました。
文字列の加工が自在にできるとストアカスタマイズの幅も広がるので、String filtersはぜひマスターしましょう！
コメント