【ワレコTypeScript講座】trimLeft()、trimRight() が無いので定義する

ワテの場合、TypeScriptを良く使う。

WEBプログラミングを始めた2年ほど前はJavaScriptを使う事が多かった。

しかし、その後、TypeScriptを使うようになった。

理由は、Visual StudioでTypeScriptを使っているのだが、

強力なインテリセンス機能
強力な文法チェック機能

などが有るので、TypeScriptの文法を良く知らなくてもプログラムが書ける。

また、TypeScriptの特徴の一つに、変数にstring, numberなどの型を指定出来る。

JavaScriptの場合には any 型なので、数字でも文字でもオブジェクトでも配列でも関数でも代入出来るメリットはあるのだが、型を厳密に意識するプログラミングには向いていないと思う。

それがTypeScriptを使えば、自分で型を指定して変数宣言が出来るので、それだけでもとっても使い易いのだ。

さて、先日、TypeScriptを使っていて文字列の trimLeft() や trimRight() が使いたかったのだが、何故か trim() しかない。

この記事では、TypeScriptで trimLeft() や trimRight() を使えるようにする為の設定を紹介したい。

ワテ自身、TypeScriptは良く分かっていないのだが、適当にやったらどうにか出来た。

では本題に入ろう。

JavaScript、TypeScriptでは trimLeft() や trimRight() は廃止されたのか？
まとめ

JavaScript、TypeScriptでは trimLeft() や trimRight() は廃止されたのか？

JavaScriptプログラミングをする場合に時々参考に見ている

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites ...

のサイトに trimLeft() に関して以下の記述がある。

String.prototype.trimLeft()
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The trimLeft() method removes whitespace from the left end of a string.

引用元　https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft

非標準

使ってはいけない

と書いてある。

trimRight() に関しても同じだ。

trim()は使える

一方、trim()メソッドに関しては、以下の説明のように問題無く使える。

The trim() method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.).

Syntax
str.trim()

Return value
A new string representing the calling string stripped of whitespace from both ends.

引用元　https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

Visual Studio 2017のTypeScriptでもtrim()メソッドはある

TypeScriptファイルを一個追加して、文字列変数strを定義する。

そのstrに対して、アルファベット t で始まるメソッドの一覧をインテリセンス機能で表示した（下図）。

その中にtrim() が表示されている。

trimLeft() や trimRight() は表示されていない。

なので使えない。

正規表現を使ってtrimLeft() や trimRight()を自作する

trimLeft() や trimRight() を自作してみた。

function trimLeft(str:string):string {
	return str.replace(/^\s+/, "");
};
 
function trimRight(str:string):string {
	return str.replace(/\s+$/, "");
};

var str = '    テスト文字列　　';
var result = trimLeft(str);  //   'テスト文字列　　'

正規表現を使っている。

使う場合には、

var result = trimLeft(str); // 'テスト文字列　　'

のように関数の引数で文字列を渡して、戻り値で結果を得ると言う普通の方法だ。

まあこれでも良いのだが、出来れば

var result = str.trimLeft();

のようにドットで連結するメソッドの形式でやりたい。

trimLeftやtrimRightをprototypeで定義する

例えば、たまたま見付けたこのサイトの記事

Trim string in JavaScript?

Trim string in JavaScript
How do I remove all whitespace from the start and end of the string?
stackoverflow.com

から引用すると、以下のように定義してやればJavaScriptでtrimLeft, trimRightが使える。

実際にやってみたら上手く行った。

String.prototype.trimLeft = String.prototype.trimLeft || function () {
	return this.replace(/^\s+/, "");
};
 
String.prototype.trimRight = String.prototype.trimRight || function () {
	return this.replace(/\s+$/, "");
};

引用元　https://stackoverflow.com/questions/498970/trim-string-in-javascript/20318353#20318353

ちなみに、上のコードのオリジナルは以下のサイトのコードらしい。

duereg/SwimTraining

SwimTraining/lib/app/swim/string.js at master · duereg/SwimTraining

Swim Training. Contribute to duereg/SwimTraining development by creating an account on GitHub.

さて、このコードをVisual StudioのTypeScriptに貼り付けてみたところエラーが出る（下図）。

う~ん、分からん。

それで、適当にぐぐってInterfaceを定義したらエラーを解消出来て上手く行った。

interface String でtrimLeft()とtrimRight()を定義する

以下のように宣言してやれば、上記のエラーは解消出来た。

interface String {
	trimLeft(): string;
	trimRight(): string;
}

なお、ワテの場合、このinterfaceに関しては、殆ど理解出来ていない。

知っているのは、こんな風に宣言しておけば今回のようなエラーが解消出来ると言う事だけだ。

なので、この方法が上記のエラーを解消する為の正統派な方法なのかどうかも未確認だ。

つまり、Stringと言うやつ（専門用語では何て言うのかな？）の中に、引数は空で戻り値がstring型であるメソッドのtrimLeftとtrimRightと言うやつがあると宣言しているのだ。

兎に角これでTypeScriptでtrimLeft() とtrimRight() が使えるようになった。

実際にその様子を見てみる。

下図のようにtrimまで入力するとインテリセンス機能がtrim, trimLeft, trimRightの三つのメソッドを候補として表示してくれる。

ええ感じや！

TypeScriptでinterface宣言してtrimLeft(), trimRight()を使う全コード

今回のテストで作成したTypeScriptの全ソースコードを紹介しよう。

interface String {
	trimLeft(): string;
	trimRight(): string;
}
 
String.prototype.trimLeft = String.prototype.trimLeft || function () {
	return this.replace(/^\s+/, "");
};
 
String.prototype.trimRight = String.prototype.trimRight || function () {
	return this.replace(/\s+$/, "");
};
 
function test() {
 
	var str: string = '   テスト文字列　　';
	var result: string = str.trimLeft();
 
}