PhpStorm 8.0.0 Web Help

In JavaScript and ActionScript, you can replace an expression with a variable or a constant. For JavaScript 1.7 or a later version, there is also an option of extracting a local variable.


To perform this refactoring, you can use:

JavaScript examples

Before After
Parenizor.method('toString', function () {
    return '(' + this.getValue() + ')';
}
                        
GLOBAL VARIABLE
Parenizor.method('toString', function () {
    var string = '(' + this.getValue() + ')';
        return string;
 }
                            
LOCAL VARIABLE
Parenizor.method('toString', function () {
    let string = '(' + this.getValue() + ')';
        return string;
 }
                            
var browserName = "N/A";
if (navigator.appName.indexOf("Netscape") != -1) {
    browserName = "NS";
} else if (navigator.appName.indexOf("Microsoft") != -1) {
    browserName = "MSIE";
} else if (navigator.appName.indexOf("Opera") != -1) {
    browserName = "O";
}
                    
var browserName = "N/A";
var appName = navigator.appName;
if (appName.indexOf("Netscape") != -1) {
    browserName = "NS";
} else if (appName.indexOf("Microsoft") != -1) {
    browserName = "MSIE";
} else if (appName.indexOf("Opera") != -1) {
    browserName = "O";
}
                    
To extract a variable using in-place refactoring
  1. In the editor, select the expression to be replaced with a variable. You can do that yourself or use the smart expression selection feature to let PhpStorm help you. So, do one of the following:
    • Highlight the expression. Then choose Refactor | Extract | Variable from the main or the context menu.

      Alternatively, press Ctrl+Alt+VCtrl+Alt+VShift+Alt+VCtrl+Alt+VCtrl+Alt+VCtrl+Alt+VShift+Alt+VShift+Alt+L or Ctrl+Alt+VAlt Command VAlt Command VAlt Command L.

      introduceVariableJSSelectExpression.png

    • Place the cursor before or within the expression. Choose Refactor | Extract Variable from the main or the context menu, or press Ctrl+Alt+VCtrl+Alt+VShift+Alt+VCtrl+Alt+VCtrl+Alt+VCtrl+Alt+VShift+Alt+VShift+Alt+L or Ctrl+Alt+VAlt Command VAlt Command VAlt Command L.

      introduceVariableJSSmartSelectExpressionStart.png

      In the Expressions pop-up menu, select the expression. To do that, click the required expression. Alternatively, use the Up and Down arrow keys to navigate to the expression of interest, and then press EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter to select it.

      introduceVariableJSSmartSelectExpression.png

      Note

      The Expressions pop-up menu contains all the expressions appropriate for the current cursor position in the editor.

      When you navigate through the suggested expressions in the pop-up, the code highlighting in the editor changes accordingly.

  2. If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences in the Multiple occurrences found pop-up menu. To select the required option, just click it. Alternatively, use the Up and Down arrow keys to navigate to the option of interest, and press EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter to select it.

    introduceVariableJSOccurrences.png

  3. Specify whether you want to replace selected expression with a variable, or a constant. To do that, click the desired radio button in the pop-up balloon:

    introduceVariableJSVarConst

  4. Specify the name of the variable. Do one of the following:
    • Select one of the suggested names from the pop-up list. To do that, double-click the suitable name. Alternatively, use the Up and Down arrow keys to navigate to the name of interest, and EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter to select it. When finished, press EscapeEscapeEscapeEscapeEscape, Escape or Ctrl+GEscapeEscapeEscapeEscapeEscapeEscape.
    • Edit the name by typing. The name is shown in the box with red borders and changes as you type. When finished, press EscapeEscapeEscapeEscapeEscape, Escape or Ctrl+GEscapeEscapeEscapeEscapeEscapeEscape.
To extract a variable using the dialog box

If the Enable in place refactorings check box is cleared in the Editor settings, the Extract Variable refactoring is performed by means of the dialog box.

enableInplaceRefactoringCleared

  1. Select the desired expression, and invoke Extract Variable refactoring as described above.
  2. If more than one expression is detected for the current cursor position, the Expressions list appears. If this is the case, select the required expression. To do that, click the expression. Alternatively, use the Up and Down arrow keys to navigate to the expression of interest, and then press EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter to select it.
  3. In the Extract Variable dialog:
    • Specify the variable name next to Name. You can select one of the suggested names from the list or type the name in the Name box.
    • If more than one occurrence of the selected expression is found, you can select to replace all the found occurrences by selecting the corresponding check box. If you want to replace only the current occurrence, clear the Replace all occurrences check box.
    • Specify the type of variable to be extracted: a (global) variable, a constant, or a local variable. To do that, click the required option in the Var kind area.
    • For ActionScript, you can choose to introduce a constant rather than a variable. To do that, select the Make constant check box.
    • Click OK.

      introduceVariableJSDialog.png

See Also

Procedures:

Web Resources: