JavaScriptで文字列の先頭と末尾から「?」を削除する方法
本記事では、文字列を唯一の引数として受け取り、その先頭と末尾に含まれる「?」(半角クエスチョンマーク)だけを削除するJavaScript関数の作成方法を解説します。文字列の途中にある「?」はそのまま保持し、両端のみをトリミングするのがポイントです。
要件の確認
求められる動作は以下のとおりです。
- 引数として渡された文字列の先頭・末尾に連続して並ぶ「?」をすべて除去する
- 文字列内部(中間)に存在する「?」は削除しない
- それ以外の文字は一切変更しない
入出力の例
たとえば、入力文字列が次の場合:
const str = '??this is a ? string?';
期待される出力は以下になります。
const output = 'this is a ? string';
先頭の「??」と末尾の「?」は削除されますが、文中の「?」はそのまま残っている点に注目してください。
実装コード
以下が実際のコード例です。
const str = '??this is a ? string?';
const specialTrim = (str = '', char = '?') => {
// まず前後の空白を除去
str = str.trim();
// 左右それぞれについて、指定文字が連続している個数を数える
let countChars = orientation => {
let inner = (orientation == "left") ? str :
str.split("").reverse().join("");
let count = 0;
for (let i = 0, len = inner.length; i < len; i++) {
if (inner[i] !== char) {
break;
}
count++;
}
return (orientation == "left") ? count : (-count);
};
const condition = typeof char === 'string' &&
str.indexOf(char) === 0 &&
str.lastIndexOf(char, -1) === 0;
if (condition) {
str = str.slice(countChars("left"), countChars("right")).trim();
}
return str;
}
console.log(specialTrim(str));コードの解説
この関数の処理の流れは次のとおりです。
- 前処理:
trim()で余分な空白を先に取り除きます。 - 連続文字のカウント: 内部関数
countChars()が、左端から順に「?」が何個連続しているかを走査します。右側については、文字列を反転させてから同じロジックを適用することで効率的に判定しています。 - スライス処理: 条件を満たす場合、
slice()を使って左右の連続した「?」を除外した範囲だけを切り出します。
なお、この関数は第2引数 char のデフォルト値が '?' になっているため、任意の一文字を指定すれば「?」以外の文字(例:ハイフンやアスタリスクなど)のトリミングにも流用できる汎用的な設計になっています。
出力結果
コンソールには次のように表示されます。
this is a ? string
このように、正規表現を使わずともループと slice() を組み合わせることで、特定文字の両端トリミングをシンプルに実装できます。
-
JavaScriptのテンプレート文字列(テンプレートリテラル)とは?基本の使い方を解説
テンプレート文字列(テンプレートリテラル)とは テンプレート文字列は、ES6(ECMAScript 2015)で導入された機能で、文字列の中に式を直接埋め込むことを可能にしました。従来のシングルクォート()やダブルクォート()の代わりに、バッククォート(``)を使用する点が特徴です。 テンプレート文字列を使うと、文字列の連結や補間(インターポレーション)がはるかに直感的に行えます。例えば ${a + b} のように記述することで、文字列の中に任意の式をそのまま埋め込めます。従来のように + 演算子で文字列をつなぎ合わせる方法と比べると、はるかに読みやすく美しい構文です。 JavaScriptに
-
JavaScriptでテンプレート文字列をネストする方法
JavaScriptのES6で導入されたテンプレート文字列(テンプレートリテラル)は、バッククォート(`)で囲むことで文字列の中に変数や式を埋め込める便利な機能です。実は、この${}(プレースホルダー)の中に、さらに別のテンプレート文字列を入れ子(ネスト)として記述することもできます。テンプレート文字列のネストとは${}の中には任意のJavaScript式を書けるため、その中で再度バッククォートを使ったテンプレート文字列を評価することが可能です。これにより、関数呼び出しの引数として動的に生成した文字列を渡すなど、柔軟な文字列組み立てが行えます。コード例以下は、ボタンをクリックすると、ネストされ