【JavaScript】オブジェクトの値から最初の単語のみを取得する方法

JavaScriptでは、オブジェクトに格納された文字列値から最初の単語だけを取り出したいケースがあります。例えば、「JavaScript HTML」のように複数の値がスペース区切りで記録されているデータから、先頭の技術名のみを抽出したい場合などです。

このような場合には、split()メソッドを使ってスペースを基準に文字列を分割すると、シンプルかつ効率的に実現できます。

対象となるオブジェクト

まず、次のような従業員情報を持つオブジェクトの配列を用意します。各従業員のemployeeTechnologyには、2つの技術がスペースで区切られて格納されています。

const employeeDetails = [
    {
        employeeName: "John Smith",
        employeeTechnology: "JavaScript HTML"
    },
    {
        employeeName: "David Miller",
        employeeTechnology: "Java Angular"
    }
]

実装例

以下がそのコードです。map()で各要素を処理し、split(/\s/)によってスペースで分割した結果を分割代入で受け取っています。

const employeeDetails = [
    {
        employeeName: "John Smith",
        employeeTechnology: "JavaScript HTML"
    },
    {
        employeeName: "David Miller",
        employeeTechnology: "Java Angular"
    }
]
const objectValues = employeeDetails.map(emp => {
    var [technology1, technology2] = emp.employeeTechnology.split(/\s/);
    return {
        technology1, technology2,
        employeeName: emp.employeeName
    }
});
console.log(objectValues);

split(/\s/)は正規表現を使って空白文字（半角スペース）を区切り文字として指定しています。これにより、「JavaScript HTML」という文字列は「JavaScript」と「HTML」の2つの要素に分けられます。分割代入を使うことで、1つ目の値と2つ目の値をそれぞれ独立した変数として扱える点がポイントです。

プログラムの実行方法

上記のプログラムを実行するには、以下のコマンドを使用します。

node fileName.js

ここでは、ファイル名をdemo244.jsとしています。

出力結果

コンソールには以下のように出力されます。各従業員の技術情報が「technology1」（最初の単語）と「technology2」（次の単語）に分離されていることが確認できます。

PS C:\Users\Amit\javascript-code> node demo244.js
[
    {
        technology1: 'JavaScript',
        technology2: 'HTML',
        employeeName: 'John Smith'
    },
    {
        technology1: 'Java',
        technology2: 'Angular',
        employeeName: 'David Miller'
    }
]

まとめ

オブジェクトの文字列値から最初の単語のみを取得したい場合は、split()メソッドとmap()を組み合わせるのが最も手軽な方法です。正規表現/\s/を区切り文字に指定すれば、スペースで区切られた任意の文字列を柔軟に分割できます。データの前処理や表示用フォーマットの整形など、さまざまな場面で活用できるテクニックなので、ぜひ覚えておきましょう。