1. 程式人生 > 實用技巧 >【Javascript】駝峰命名法和短橫線命名法的轉換

【Javascript】駝峰命名法和短橫線命名法的轉換

駝峰命名:getElementById

短橫線命名:get-element-by-id

1、將駱駝命名規則的字串轉換成使用短橫線命名法的字串, 並且全小寫 .例如:'getElementById'=>'get-element-by-id'

正則表示式:

function getKebabCase( str ) {
    return str.replace( /[A-Z]/g, function( i ) {
        return '-' + i.toLowerCase();
    })
}
console.log( getKebabCase( 'getElementById' ) ); //
get-element-by-id

採用陣列的方法:

function getKebabCase ( str ) {
 var arr = str.split('');
    str = arr.map(function ( item ){
        if( item.toUpperCase() === item ){
            return '-' + item.toLowerCase();
        }else{
            return item;
        }
    }).join( '' );
    return str;
}
console.log( getKebabCase( 
'getElementById' ) ); //get-element-by-id

2、將短橫線命名法的字串轉換成使用駱駝命名規則的字串, 並且全小寫 .例如:'get-element-by-id'=>'getElementById'

正則表示式:

function getCamelCase( str ) {
    return str.replace( /-([a-z])/g, function( all, i ){
        return i.toUpperCase();
    } )
}
console.log( getCamelCase( 'get-element-by-id' ) ); //
getElementById

陣列的方法:

function getCamelCase( str ) {
    var arr = str.split( '-' );
    return arr.map( function( item, index ) {
        if( index === 0 ){
            return item;
        }else{
            return item.charAt(0).toUpperCase() + item.slice( 1 );
        }
    }).join('');
}
console.log( getCamelCase( 'get-element-by-id' ) ); //getElementById